search

esm-dev / esm.sh

A fast, smart, & global CDN for modern(es2015+) web development.
https://esm.sh
MIT License
3.05k stars 146 forks source link

Multiple versions of the same library are loaded #420

Open marvinhagemeister opened 2 years ago

marvinhagemeister commented 2 years ago

Failing module

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/preact-render-to-string?deps=preact@10.11.0");
  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/preact?deps=preact@10.11.0");
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} />`));
ije commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

This is still an issue. Here's another example that's occurring:

import "https://esm.sh/preact@10.11.3";
import "https://esm.sh/react-bootstrap@1.6.6?alias=react:preact/compat&deps=preact@10.11.3";

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 commented 1 year ago

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

talentlessguy commented 11 months ago

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/preact@10.15.1/jsx-runtime (187B)
│ ├─┬ https://esm.sh/v128/preact@10.15.1/jsx-runtime/src/index.d.ts (1.2KB)
│ │ ├─┬ https://esm.sh/v128/preact@10.15.1/src/index.d.ts (10.09KB)
│ │ │ └─┬ https://esm.sh/v128/preact@10.15.1/src/jsx.d.ts (70.49KB)
│ │ │   └── https://esm.sh/v128/preact@10.15.1/src/index.d.ts *
│ │ └── https://esm.sh/v128/preact@10.15.1/src/jsx.d.ts *
│ ├── https://esm.sh/stable/preact@10.15.1/denonext/preact.mjs (10.53KB)
│ └─┬ https://esm.sh/stable/preact@10.15.1/denonext/jsx-runtime.js (646B)
│   └── https://esm.sh/stable/preact@10.15.1/denonext/preact.mjs *
├─┬ https://esm.sh/@radix-ui/react-dropdown-menu@2.0.6?alias=react:preact/compat&deps=preact@10.15.1 (1.1KB)
│ ├─┬ https://esm.sh/stable/preact@10.15.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/compat.js (9.71KB)
│ │ ├── https://esm.sh/stable/preact@10.15.1/denonext/preact.mjs *
│ │ └─┬ https://esm.sh/stable/preact@10.15.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/hooks.js (3.71KB)
│ │   └── https://esm.sh/stable/preact@10.15.1/denonext/preact.mjs *
│ │ └─┬ https://esm.sh/stable/preact@10.17.1/denonext/compat.js (9.71KB)
│ │   ├── https://esm.sh/stable/preact@10.17.1/denonext/preact.mjs (10.65KB)
│ │   └─┬ https://esm.sh/stable/preact@10.17.1/denonext/hooks.js (3.71KB)
│ │     └── https://esm.sh/stable/preact@10.17.1/denonext/preact.mjs *
│ │ └── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │ ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │   └── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │ ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │ │ └── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │   ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │ ├─┬ https://esm.sh/stable/preact@10.18.1/denonext/compat.js (9.71KB)
│ │ │ ├── https://esm.sh/stable/preact@10.18.1/denonext/preact.mjs (10.75KB)
│ │ │ └─┬ https://esm.sh/stable/preact@10.18.1/denonext/hooks.js (3.71KB)
│ │ │   └── https://esm.sh/stable/preact@10.18.1/denonext/preact.mjs *
│ │ │ ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │ │ └── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/preact@10.18.1/denonext/compat.js *
│ │ │   ├── https://esm.sh/stable/preact@10.18.1/denonext/compat.js *
│ │ │ └── https://esm.sh/stable/preact@10.18.1/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/preact@10.18.1/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │ │   └── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/preact@10.18.1/denonext/compat.js *
│ │ │ │ ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │ │ │ ├── https://esm.sh/stable/preact@10.18.1/denonext/compat.js *
│ │ │   ├── https://esm.sh/stable/preact@10.18.1/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/preact@10.18.1/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │ │ ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │   ├── https://esm.sh/stable/preact@10.18.1/denonext/compat.js *
│ │   │ └── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │   │ ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │   │ ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│ │   │   ├── https://esm.sh/stable/preact@10.17.1/denonext/compat.js *
│   ├── https://esm.sh/stable/preact@10.15.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/compat.js *
├─┬ https://esm.sh/framer-motion@10.12.23?alias=react:preact/compat&deps=preact@10.15.1 (351B)
│ ├── https://esm.sh/stable/preact@10.15.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/compat.js *
│   └── https://esm.sh/stable/preact@10.15.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/compat.js *
├─┬ https://esm.sh/*@preact/signals@1.1.3 (110B)
│ ├─┬ https://esm.sh/v132/@preact/signals@1.1.3/X-ZS8q/dist/signals.d.ts (1.7KB)
│ │ └─┬ https://esm.sh/*@preact/signals-core@1.2.3 (125B)
│ │   ├── https://esm.sh/v132/@preact/signals-core@1.2.3/X-ZS8q/dist/signals-core.d.ts (588B)
│ │   └── https://esm.sh/v132/@preact/signals-core@1.2.3/X-ZS8q/denonext/signals-core.mjs (3.92KB)
│ └─┬ https://esm.sh/v132/@preact/signals@1.1.3/X-ZS8q/denonext/signals.mjs (2.61KB)
│   ├─┬ https://esm.sh/preact@10.15.1 (104B)
│   │ ├── https://esm.sh/v128/preact@10.15.1/src/index.d.ts *
│   │ └── https://esm.sh/stable/preact@10.15.1/denonext/preact.mjs *
│   ├─┬ https://esm.sh/preact@10.15.1/hooks (175B)
│   │ ├─┬ https://esm.sh/v128/preact@10.15.1/hooks/src/index.d.ts (5.54KB)
│   │ │ └── https://esm.sh/v128/preact@10.15.1/src/index.d.ts *
│   │ ├── https://esm.sh/stable/preact@10.15.1/denonext/preact.mjs *
│   │ └─┬ https://esm.sh/stable/preact@10.15.1/denonext/hooks.js (3.71KB)
│   │   └── https://esm.sh/stable/preact@10.15.1/denonext/preact.mjs *
│   └── https://esm.sh/*@preact/signals-core@1.2.3 *
│ ├── https://esm.sh/preact@10.15.1/jsx-runtime *
│ └── https://esm.sh/preact@10.15.1 *
  │ ├── https://esm.sh/preact@10.15.1 *
  │ ├── https://esm.sh/preact@10.15.1 *
  │ └── https://esm.sh/preact@10.15.1/hooks *
    ├── https://esm.sh/preact@10.15.1 *
    └── https://esm.sh/preact@10.15.1/hooks *

this is my deno.json:

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.4.3/",
    "preact": "https://esm.sh/preact@10.15.1",
    "preact/": "https://esm.sh/preact@10.15.1/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.1",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
    "twind": "https://esm.sh/twind@0.16.19",
    "twind/": "https://esm.sh/twind@0.16.19/",
    "$std/": "https://deno.land/std@0.193.0/",
    "@radix-ui/react-dropdown-menu": "https://esm.sh/@radix-ui/react-dropdown-menu@2.0.6?alias=react:preact/compat&deps=preact@10.15.1",
    "framer-motion": "https://esm.sh/framer-motion@10.12.23?alias=react:preact/compat&deps=preact@10.15.1"
  },
  "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/preact@10.17.1/denonext/hooks.js:2:194)
    at T (https://esm.sh/stable/preact@10.17.1/denonext/hooks.js:2:1458)
    at https://esm.sh/v132/@radix-ui/react-context@1.0.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:855
    at https://esm.sh/v132/@radix-ui/react-context@1.0.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:1128
    at Array.reduce (<anonymous>)
    at https://esm.sh/v132/@radix-ui/react-context@1.0.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:1084
    at Object.X (https://esm.sh/v132/@radix-ui/react-dropdown-menu@2.0.6/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmQvcHJlYWN0QDEwLjE1LjE/denonext/react-dropdown-menu.mjs:2:1535)
    at v (https://esm.sh/v132/preact-render-to-string@6.2.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3034)
    at v (https://esm.sh/v132/preact-render-to-string@6.2.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:4847)
    at v (https://esm.sh/v132/preact-render-to-string@6.2.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2545)
TypeError: Cannot read properties of undefined (reading '__H')
    at l (https://esm.sh/stable/preact@10.17.1/denonext/hooks.js:2:194)
    at T (https://esm.sh/stable/preact@10.17.1/denonext/hooks.js:2:1458)
    at https://esm.sh/v132/@radix-ui/react-context@1.0.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:855
    at https://esm.sh/v132/@radix-ui/react-context@1.0.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:1128
    at Array.reduce (<anonymous>)
    at https://esm.sh/v132/@radix-ui/react-context@1.0.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/denonext/react-context.mjs:2:1084
    at Object.X (https://esm.sh/v132/@radix-ui/react-dropdown-menu@2.0.6/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmQvcHJlYWN0QDEwLjE1LjE/denonext/react-dropdown-menu.mjs:2:1535)
    at v (https://esm.sh/v132/preact-render-to-string@6.2.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3034)
    at v (https://esm.sh/v132/preact-render-to-string@6.2.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:4847)
    at v (https://esm.sh/v132/preact-render-to-string@6.2.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2545)