Multiple versions of the same library are loaded

[marvinhagemeister]

Failing module

• GitHub + npm:
  • preact-render-to-string
  • preact
  • htm/preact

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:

[ije]

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.

[marvinhagemeister]

@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.

[minimusubi]

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.

[ije]

@Smiley43210 thanks for the details, I will look into it

[talentlessguy]

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)