esm.sh
esm.sh copied to clipboard
Multiple versions of the same library are loaded
Failing module
- GitHub + npm:
Originally reported here: https://github.com/preactjs/preact/issues/3725
We noticed an issue with esm.sh where it imports different versions of the same package with the default resolution behaviour. In our case both Preact 10.10.6
and 10.11.0
are imported. Because the hooks functionality relies on a singleton global by design, they break when multiple versions of Preact are loaded. The older 10.10.6
version is loaded by both https://esm.sh/preact-render-to-string and https://esm.sh/htm/preact .
Reproduction case:
const { render } = await import("https://esm.sh/preact-render-to-string");
const htm = await import("https://esm.sh/htm/preact");
const { useState } = await import("https://esm.sh/preact/hooks");
function App() {
const [count, setCount] = useState(0);
return htm.html`<div>
<p>${count}</p>
<button onClick=${() => setCount(count + 1)}>click</button>
</div>`;
}
console.log(render(htm.html`<${App} />`));
Error message
After onload
I got this:
TypeError: Cannot read properties of undefined (reading '__H')
This error always occurs when hooks are used and different versions of Preact are loaded.
Additional info
Workaround is to override the default versions picked by esm.sh to use the latest version of Preact:
- const render = await import("https://esm.sh/preact-render-to-string");
+ const { render } = await import("https://esm.sh/[email protected]");
const React = await import("https://esm.sh/preact/compat");
- const preact = await import("https://esm.sh/htm/preact");
+ const preact = await import("https://esm.sh/htm/[email protected]");
const { useState } = await import("https://esm.sh/preact/hooks");
function App() {
const [count, setCount] = useState(0);
return preact.html`<p>hello</p>`;
}
console.log(render(preact.html`<${App} />`));
- esm.sh version:
- Browser version:
since html
doesn't specify the dependencies
in the package.json
, so the server use the latest version of preact
instead and option ?deps
also can not work. but if you are using import maps, you can import the htm/preact
from https://esm.sh/*htm/preact
then you need to specify the preact
and htm
imports in the import maps.
![Screen Shot 2022-09-17 at 00 49 02](https://user-images.githubusercontent.com/2883484/190689464-d0d3f9c2-6105-4f0c-8988-aa15ff17c2d0.png)
@ije that's indeed a bit icky regarding the htm
package.
If it would pick the latest version, than it would've worked fine. The weird thing is that it didn't pick the latest, but instead went with 10.10.6
as a fallback.
This is still an issue. Here's another example that's occurring:
import "https://esm.sh/[email protected]";
import "https://esm.sh/[email protected]?alias=react:preact/compat&[email protected]";
This causes the browser to make the following preact requests:
Note that despite specifying the version of preact to use with
deps
(10.11.3), it chooses to use 10.11.2. The initiator of the request with the wrong version is the react-bootstrap
import.
@Smiley43210 thanks for the details, I will look into it
This still happens with latest esm.sh. I'm developing a project on Fresh and facing issues with multiple preact instances being loaded:
╰─λ deno info components/Nav.tsx | grep preact
├─┬ https://esm.sh/[email protected]/jsx-runtime (187B)
│ ├─┬ https://esm.sh/v128/[email protected]/jsx-runtime/src/index.d.ts (1.2KB)
│ │ ├─┬ https://esm.sh/v128/[email protected]/src/index.d.ts (10.09KB)
│ │ │ └─┬ https://esm.sh/v128/[email protected]/src/jsx.d.ts (70.49KB)
│ │ │ └── https://esm.sh/v128/[email protected]/src/index.d.ts *
│ │ └── https://esm.sh/v128/[email protected]/src/jsx.d.ts *
│ ├── https://esm.sh/stable/[email protected]/denonext/preact.mjs (10.53KB)
│ └─┬ https://esm.sh/stable/[email protected]/denonext/jsx-runtime.js (646B)
│ └── https://esm.sh/stable/[email protected]/denonext/preact.mjs *
├─┬ https://esm.sh/@radix-ui/[email protected]?alias=react:preact/compat&[email protected] (1.1KB)
│ ├─┬ https://esm.sh/stable/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/compat.js (9.71KB)
│ │ ├── https://esm.sh/stable/[email protected]/denonext/preact.mjs *
│ │ └─┬ https://esm.sh/stable/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/hooks.js (3.71KB)
│ │ └── https://esm.sh/stable/[email protected]/denonext/preact.mjs *
│ │ └─┬ https://esm.sh/stable/[email protected]/denonext/compat.js (9.71KB)
│ │ ├── https://esm.sh/stable/[email protected]/denonext/preact.mjs (10.65KB)
│ │ └─┬ https://esm.sh/stable/[email protected]/denonext/hooks.js (3.71KB)
│ │ └── https://esm.sh/stable/[email protected]/denonext/preact.mjs *
│ │ └── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ └── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ └── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ ├─┬ https://esm.sh/stable/[email protected]/denonext/compat.js (9.71KB)
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/preact.mjs (10.75KB)
│ │ │ └─┬ https://esm.sh/stable/[email protected]/denonext/hooks.js (3.71KB)
│ │ │ └── https://esm.sh/stable/[email protected]/denonext/preact.mjs *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ └── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ └── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ └── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ └── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/[email protected]/denonext/compat.js *
│ ├── https://esm.sh/stable/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/compat.js *
├─┬ https://esm.sh/[email protected]?alias=react:preact/compat&[email protected] (351B)
│ ├── https://esm.sh/stable/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/compat.js *
│ └── https://esm.sh/stable/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/compat.js *
├─┬ https://esm.sh/*@preact/[email protected] (110B)
│ ├─┬ https://esm.sh/v132/@preact/[email protected]/X-ZS8q/dist/signals.d.ts (1.7KB)
│ │ └─┬ https://esm.sh/*@preact/[email protected] (125B)
│ │ ├── https://esm.sh/v132/@preact/[email protected]/X-ZS8q/dist/signals-core.d.ts (588B)
│ │ └── https://esm.sh/v132/@preact/[email protected]/X-ZS8q/denonext/signals-core.mjs (3.92KB)
│ └─┬ https://esm.sh/v132/@preact/[email protected]/X-ZS8q/denonext/signals.mjs (2.61KB)
│ ├─┬ https://esm.sh/[email protected] (104B)
│ │ ├── https://esm.sh/v128/[email protected]/src/index.d.ts *
│ │ └── https://esm.sh/stable/[email protected]/denonext/preact.mjs *
│ ├─┬ https://esm.sh/[email protected]/hooks (175B)
│ │ ├─┬ https://esm.sh/v128/[email protected]/hooks/src/index.d.ts (5.54KB)
│ │ │ └── https://esm.sh/v128/[email protected]/src/index.d.ts *
│ │ ├── https://esm.sh/stable/[email protected]/denonext/preact.mjs *
│ │ └─┬ https://esm.sh/stable/[email protected]/denonext/hooks.js (3.71KB)
│ │ └── https://esm.sh/stable/[email protected]/denonext/preact.mjs *
│ └── https://esm.sh/*@preact/[email protected] *
│ ├── https://esm.sh/[email protected]/jsx-runtime *
│ └── https://esm.sh/[email protected] *
│ ├── https://esm.sh/[email protected] *
│ ├── https://esm.sh/[email protected] *
│ └── https://esm.sh/[email protected]/hooks *
├── https://esm.sh/[email protected] *
└── https://esm.sh/[email protected]/hooks *
this is my deno.json:
{
"imports": {
"$fresh/": "https://deno.land/x/[email protected]/",
"preact": "https://esm.sh/[email protected]",
"preact/": "https://esm.sh/[email protected]/",
"preact-render-to-string": "https://esm.sh/*[email protected]",
"@preact/signals": "https://esm.sh/*@preact/[email protected]",
"@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
"twind": "https://esm.sh/[email protected]",
"twind/": "https://esm.sh/[email protected]/",
"$std/": "https://deno.land/[email protected]/",
"@radix-ui/react-dropdown-menu": "https://esm.sh/@radix-ui/[email protected]?alias=react:preact/compat&[email protected]",
"framer-motion": "https://esm.sh/[email protected]?alias=react:preact/compat&[email protected]"
},
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact"
}
}
When running the project I get this:
An error occurred during route handling or page rendering. TypeError: Cannot read properties of undefined (reading '__H')
at l (https://esm.sh/stable/[email protected]/denonext/hooks.js:2:194)
at T (https://esm.sh/stable/[email protected]/denonext/hooks.js:2:1458)
at https://esm.sh/v132/@radix-ui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:855
at https://esm.sh/v132/@radix-ui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:1128
at Array.reduce (<anonymous>)
at https://esm.sh/v132/@radix-ui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:1084
at Object.X (https://esm.sh/v132/@radix-ui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmQvcHJlYWN0QDEwLjE1LjE/denonext/react-dropdown-menu.mjs:2:1535)
at v (https://esm.sh/v132/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3034)
at v (https://esm.sh/v132/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:4847)
at v (https://esm.sh/v132/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2545)
TypeError: Cannot read properties of undefined (reading '__H')
at l (https://esm.sh/stable/[email protected]/denonext/hooks.js:2:194)
at T (https://esm.sh/stable/[email protected]/denonext/hooks.js:2:1458)
at https://esm.sh/v132/@radix-ui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:855
at https://esm.sh/v132/@radix-ui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:1128
at Array.reduce (<anonymous>)
at https://esm.sh/v132/@radix-ui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:1084
at Object.X (https://esm.sh/v132/@radix-ui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmQvcHJlYWN0QDEwLjE1LjE/denonext/react-dropdown-menu.mjs:2:1535)
at v (https://esm.sh/v132/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3034)
at v (https://esm.sh/v132/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:4847)
at v (https://esm.sh/v132/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2545)