🐛 BUG: Cannot read properties of undefined (reading '__H') in component library #3449

d3x7r0 · 2022-05-26T12:28:45Z

What version of `astro` are you using?

1.0.0-beta.34

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Attempting to use a separate npm package with components written in preact leads to an error where preact components cannot be renderered.

Cannot read properties of undefined (reading '__H')

TypeError: Cannot read properties of undefined (reading '__H')
    at p (/Users/dextro/projects/astro-preact-repro/components/node_modules/preact/hooks/dist/hooks.js:1:194)
    at m (/Users/dextro/projects/astro-preact-repro/components/node_modules/preact/hooks/dist/hooks.js:1:590)
    at Proxy.exports.useCallback (/Users/dextro/projects/astro-preact-repro/components/node_modules/preact/hooks/dist/hooks.js:1:2446)
    at Object.MyCustomComponent (/Users/dextro/projects/astro-preact-repro/compone&#8230;

Link to Minimal Reproducible Example

https://github.com/d3x7r0/astro-test

Participation

I am willing to submit a pull request for this issue.

The text was updated successfully, but these errors were encountered:

aFuzzyBear · 2022-05-26T12:30:49Z

User reported issues:
https://discord.com/channels/830184174198718474/979305017318207508

This looks like a small issue with dependencies within the @astro/preact integration.

d3x7r0 · 2022-05-26T12:34:55Z

Sorry, I had made a small mistake in my repro (not installing the component library dependencies) and that lead to the wrong issue showing up.

I updated the ticket accordingly.

bholmesdev · 2022-06-21T20:16:43Z

Thanks for reporting @d3x7r0! From testing, it seems this is an issue with Vite bundling Preact, resulting in a duplicate Preact during development. This is the best fix right now:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from "@astrojs/preact";

export default defineConfig({
  integrations: [preact()],
  // add a vite config to your astro.config.mjs
  vite: {
    ssr: {
      // add your package to the `noExternal` list
      noExternal: ['my-package']
    }
  }
});

☝️ Let me know if noExternal resolves your issue!

d3x7r0 · 2022-06-25T15:46:29Z

I'm sad to say that it doesn't seem to solve it.
I updated the example with the config (and the latest versions of everything) and now it fully crashes with the same error message but on the terminal instead of the page:

TypeError: Cannot read properties of undefined (reading '__H')
    at l (<snip>/astro-test/components/node_modules/preact/hooks/dist/hooks.js:1:201)
    at d (<snip>/astro-test/components/node_modules/preact/hooks/dist/hooks.js:1:600)
    at Proxy.exports.useCallback (<snip>/astro-test/components/node_modules/preact/hooks/dist/hooks.js:1:2631)
    at Object.MyCustomComponent (/@fs<snip>/astro-test/components/src/js/index.jsx:8:36)
    at m (<snip>/astro-test/main/node_modules/preact-render-to-string/dist/commonjs.js:1:2609)
    at Proxy.y (<snip>/astro-test/main/node_modules/preact-render-to-string/dist/commonjs.js:1:1288)
    at Object.renderToStaticMarkup (@astrojs/preact/server.js:42:44)
    at Module.renderComponent (/node_modules/astro/dist/runtime/server/index.js:216:61)

bholmesdev · 2022-06-29T20:25:25Z

Ack, understood. We'll wait for the Vite 3 migration to finish before re-testing. Dependency management should improve once this is out!

jeremydw · 2022-07-20T23:07:09Z

Hi All - I'm running into this as well. Is there any workaround with Vite 2?

jeremydw · 2022-07-21T02:50:02Z

FYI: I was able to get this working in my project by adding preact/hooks here in the @astrojs/preact integration (linked below). I discovered the fix by Googling and finding preactjs/preact#3468 (comment).

astro/packages/integrations/preact/src/index.ts

Line 57 in 272d24b

'preact',

FredKSchott · 2022-07-29T17:15:00Z

Vite 3 may have fixed this in the latest RC versions of Astro! @bholmesdev to confirm, and if not look into:

@jeremydw's recommendation above
@matthewp's suggestion: multiple copies of preact, preact integration version not matching your own package.json version

vamshi9666 · 2022-08-01T08:08:47Z

i am stilly facing this error in latest RC ie 1.0.0-rc.3 @FredKSchott @bholmesdev

matthewp · 2022-08-01T20:35:42Z

Does anyone have an example that's not using a monorepo setup like in the initial post?

matthewp · 2022-08-01T20:47:29Z

I'm not sure the OP is actually a bug. There are 2 different node_modules/ in separate folders. These are not deduped, that's just not how Node works. If they had a common node_modules/ folder that shared preact as a dependency it would work.

But since there are multiple reports here I'm guessing they aren't all using this setup.

bholmesdev · 2022-08-01T21:10:15Z

@matthewp I modified the minimal repro to make preact a dev dependency in the components/ package instead, preventing 2 different preacts across node_modules. This didn't resolve the issue for some reason 🤷

d3x7r0 · 2022-08-01T21:18:24Z

Does anyone have an example that's not using a monorepo setup like in the initial post?

Hi there. Just a minor clarification about my example: I'm hitting this issue exactly as the repo shows. I have two completely separate projects that depend on each other. They are not on the same repo, I just put them both in the same one to make the example easier.

Presumably the same issue would happen on any other library that has preact as a peer dependency instead of react (those are pretty rare admittedly).

EDIT: btw I updated the repo with the latest versions and removed any extra libraries. Also moved preact to "peerDeps" (since that's the more arguably "correct" way to describe the dependencies of the library part of the repro).

That said, the new error message is even weirder to me:

Cannot find module 'astro/server/index.js' imported from '[...]/astro-test/components/src/js/index.jsx'

    at viteResolve ([...]/astro-test/main/node_modules/vite/dist/node/chunks/dep-1513d487.js:50354:25)
    at nodeImport ([...]/astro-test/main/node_modules/vite/dist/node/chunks/dep-1513d487.js:50389:15)
    at ssrImport ([...]/astro-test/main/node_modules/vite/dist/node/chunks/dep-1513d487.js:50284:20)
    at eval ([...]/astro-test/components/src/js/index.jsx:3:37)
    at instantiateModule ([...]/astro-test/main/node_modules/vite/dist/node/chunks/dep-1513d487.js:50330:15

matthewp · 2022-08-02T12:37:06Z

@bholmesdev It doesn't matter if its a devDependency or regular, the same result is that you have 2 node_modules/ folders that do not have a common root, and therefore Node will load preact in each of those. Node does not dedupe based on semver or anything like that, it simply walks up node_modules/ folders until it finds a copy.

d3x7r0 · 2022-08-02T12:43:48Z

@matthewp sorry but I think my example is muddying the waters here a bit. I used a separate folder and used an npm file dependency to simplify but this happens when you have a dependency that's of the type module and which depends on preact.

What happens is that vite, somehow, doesn't dedupe the preact/hooks dependency despite both being on the same tree.

This is the end result of installing such a dependency:

$ npm ls preact
main@0.0.1 [...]/astro-test/main
├─┬ @astrojs/preact@0.5.2
│ ├─┬ preact-render-to-string@5.2.1
│ │ └── preact@10.10.0 deduped
│ └── preact@10.10.0 deduped
└── preact@10.10.0

Notice how there's only a single preact in the tree and the error still shows up.

matthewp · 2022-08-02T12:46:06Z

@d3x7r0 can you fork this and make it break? https://stackblitz.com/edit/github-exuehl?file=src/pages/index.astro

It's unclear to me what's different about this example from what you are doing.

matthewp · 2022-08-02T12:49:36Z

Ah, ok I can get it to break by adding preact/hooks. My guess is that this is a Vite bug.

https://stackblitz.com/edit/github-exuehl?file=one%2Fmain.js

d3x7r0 · 2022-08-02T12:53:37Z

@matthewp it does look that way. I can't even begin to venture a guess though. I don't know too much about Vite internals :-(

d3x7r0 · 2022-08-02T12:55:02Z

Maybe it's related to this issue? vitejs/vite#8378

d3x7r0 · 2022-08-02T13:07:50Z

Ok so good news. By manually adding the resolve.dedupe option to the configuration I can get the library to work.

So long as the library code is using plain JS and not JSX.

Maybe this is something that could be added to @astrojs/preact or, at the very least, documented there?

matthewp · 2022-08-02T13:08:49Z

The problem is that preact-render-to-string is loaded as a CommonJS module, so it loads a CommonJS version of preact, but the app code gets the ESM version of preact. I don't think preact-render-to-string should be getting a CJS version so I'm investigating why it is.

stephenwil · 2022-09-04T19:15:34Z

Still getting tnis issue with latest (v1.0.2) astrojs and then adding preact integration

RapidOwl · 2022-09-08T19:55:48Z

Hey folks, I found my way here from an issue on the Preact repo.

I don't know if this is going to be helpful for the Preact Astro integration, but this solved it for me with Preact + Vitest:

Here's a copy of my reply over there:

I just ran into this issue with Preact + Vitest and found this solution on a similar issue on the Vitest repo: vitest-dev/vitest#1652 (comment). Forcing the aliased module to load using require fixed it for me.

Stuck this at the top of my vite.config.js:

import { createRequire } from 'module';

const require = createRequire(import.meta.url);

Then I've got a resolve section in the object I pass to defineConfig.

resolve: {
	alias: [
		{
			find: 'preact/hooks',
			replacement: require.resolve('preact/hooks')
		}
	]
}

This is apparently due to the way Vite imports unprocessed modules. I don't really understand the CJS vs ESM madness and wish it wasn't a thing.

Weirdly, I only had this problem with preact/hooks. htm/preact worked fine without require.

illiantech · 2024-08-11T08:35:31Z

Astro v4.12.3
Node v20.15.1
System Windows (x64)
Package Manager pnpm
Output static
Adapter none
Integrations @astrojs/preact

hello everyone

I have the same problem with the current versions of preact and astro.

I tried everything in this thread but absolutely nothing worked for me, has anyone had the same thing happen to them with recent versions?

bholmesdev · 2024-08-11T12:47:29Z

Hey @illiantech! Been there, it’s not a fun issue to debug. Would you mind trying to reproduce in a Stackblitz example? If you can reproduce, I suggest opening a new GitHub issue.

vuhoanglam · 2024-11-03T10:05:28Z

Astro v4.12.3 Node v20.15.1 System Windows (x64) Package Manager pnpm Output static Adapter none Integrations @astrojs/preact

hello everyone

I have the same problem with the current versions of preact and astro.

I tried everything in this thread but absolutely nothing worked for me, has anyone had the same thing happen to them with recent versions?

+1. Same issue with astro ssr

aFuzzyBear added the pkg: preact Related to Preact (scope) label May 26, 2022

d3x7r0 changed the title ~~🐛 BUG: Cannot find module 'preact/hooks' imported in component library~~ 🐛 BUG: Cannot read properties of undefined (reading '__H') in component library May 26, 2022

natemoo-re added - P4: important Violate documented behavior or significantly impacts performance (priority) s2-medium labels Jun 2, 2022

bholmesdev self-assigned this Jun 20, 2022

bholmesdev removed their assignment Jul 21, 2022

FredKSchott assigned bholmesdev Jul 29, 2022

matthewp mentioned this issue Aug 2, 2022

Prefer loading renderers with native ESM over Vite #4123

Closed

matthewp mentioned this issue Aug 2, 2022

Upgrade Vite to 3.0.4 #4124

Merged

FredKSchott closed this as completed in #4124 Aug 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛 BUG: Cannot read properties of undefined (reading '__H') in component library #3449

🐛 BUG: Cannot read properties of undefined (reading '__H') in component library #3449

d3x7r0 commented May 26, 2022 •

edited

Loading

aFuzzyBear commented May 26, 2022

d3x7r0 commented May 26, 2022

bholmesdev commented Jun 21, 2022 •

edited

Loading

d3x7r0 commented Jun 25, 2022

bholmesdev commented Jun 29, 2022

jeremydw commented Jul 20, 2022

jeremydw commented Jul 21, 2022

FredKSchott commented Jul 29, 2022

vamshi9666 commented Aug 1, 2022

matthewp commented Aug 1, 2022

matthewp commented Aug 1, 2022

bholmesdev commented Aug 1, 2022

d3x7r0 commented Aug 1, 2022 •

edited

Loading

matthewp commented Aug 2, 2022

d3x7r0 commented Aug 2, 2022

matthewp commented Aug 2, 2022

matthewp commented Aug 2, 2022

d3x7r0 commented Aug 2, 2022

d3x7r0 commented Aug 2, 2022

d3x7r0 commented Aug 2, 2022

matthewp commented Aug 2, 2022

stephenwil commented Sep 4, 2022

RapidOwl commented Sep 8, 2022

illiantech commented Aug 11, 2024 •

edited

Loading

bholmesdev commented Aug 11, 2024

vuhoanglam commented Nov 3, 2024

🐛 BUG: Cannot read properties of undefined (reading '__H') in component library #3449

🐛 BUG: Cannot read properties of undefined (reading '__H') in component library #3449

Comments

d3x7r0 commented May 26, 2022 • edited Loading

What version of astro are you using?

Are you using an SSR adapter? If so, which one?

What package manager are you using?

What operating system are you using?

Describe the Bug

Link to Minimal Reproducible Example

Participation

aFuzzyBear commented May 26, 2022

d3x7r0 commented May 26, 2022

bholmesdev commented Jun 21, 2022 • edited Loading

d3x7r0 commented Jun 25, 2022

bholmesdev commented Jun 29, 2022

jeremydw commented Jul 20, 2022

jeremydw commented Jul 21, 2022

FredKSchott commented Jul 29, 2022

vamshi9666 commented Aug 1, 2022

matthewp commented Aug 1, 2022

matthewp commented Aug 1, 2022

bholmesdev commented Aug 1, 2022

d3x7r0 commented Aug 1, 2022 • edited Loading

matthewp commented Aug 2, 2022

d3x7r0 commented Aug 2, 2022

matthewp commented Aug 2, 2022

matthewp commented Aug 2, 2022

d3x7r0 commented Aug 2, 2022

d3x7r0 commented Aug 2, 2022

d3x7r0 commented Aug 2, 2022

matthewp commented Aug 2, 2022

stephenwil commented Sep 4, 2022

RapidOwl commented Sep 8, 2022

illiantech commented Aug 11, 2024 • edited Loading

bholmesdev commented Aug 11, 2024

vuhoanglam commented Nov 3, 2024

d3x7r0 commented May 26, 2022 •

edited

Loading

What version of `astro` are you using?

bholmesdev commented Jun 21, 2022 •

edited

Loading

d3x7r0 commented Aug 1, 2022 •

edited

Loading

illiantech commented Aug 11, 2024 •

edited

Loading