Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multiple versions of the same library are loaded #420

Open
marvinhagemeister opened this issue Sep 14, 2022 · 5 comments
Open

Multiple versions of the same library are loaded #420

marvinhagemeister opened this issue Sep 14, 2022 · 5 comments
Labels
browser Not working in Browser

Comments

@marvinhagemeister
Copy link
Contributor

Failing module

Originally reported here: preactjs/preact#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:
@marvinhagemeister marvinhagemeister added the browser Not working in Browser label Sep 14, 2022
@ije
Copy link
Member

ije commented Sep 16, 2022

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

@marvinhagemeister
Copy link
Contributor Author

@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
Copy link

minimusubi commented Nov 17, 2022 •
edited
Loading

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:
image
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
Copy link
Member

ije commented Nov 17, 2022

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

@ije ije closed this as completed in 865e8af Nov 19, 2022
@talentlessguy
Copy link
Contributor

talentlessguy commented Oct 4, 2023 •
edited
Loading

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)

@ije ije reopened this Oct 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser Not working in Browser
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@minimusubi @marvinhagemeister @ije @talentlessguy