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.

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

Cannot read property '__H' of undefined when I try to use mjs-version of the "hooks" package #2690

Closed
pokatomnik opened this issue Aug 9, 2020 · 17 comments

Comments

@pokatomnik
Copy link

Reproduction

Try to import hooks using from the mjs (with no bundlers) as described in the docs:
https://preactjs.com/guide/v8/getting-started/
https://preactjs.com/guide/v10/getting-started/#alternatives-to-jsx
The Preact itself is being imported fine, but I do not understand how should I import the hooks package properly.

Steps to reproduce

Try to import hooks using mjs modules format like this

<script type="module">
import {useState} from 'https://unpkg.com/[email protected]/hooks/dist/hooks.mjs?module'

export const useFoo = () => {
  const [state, setState] = useState(0);
  return {state, setState};
}
</script>

Expected Behavior

Hooks module is imported successfully

Actual Behavior

I see

Cannot read property '__H' of undefined

error in the console and everything crashes (blank page).

@sventschui
Copy link
Member

sventschui commented Aug 9, 2020

Usually it should work when using imports like this:

import { createElement as h, render, Component } from 'https://unpkg.com/preact@latest?module';
import { useState } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module';

(see https://github.com/JoviDeCroock/Vanilla-Preact-Application/blob/master/src/index.js#L1 ; https://github.com/JoviDeCroock/Vanilla-Preact-Application/blob/master/src/modules/home/index.js#L1 )

I guess this is a duplicate of #2564 #2439 #1961 #2571

Or am I missing your point?

@pokatomnik
Copy link
Author

Yep, I seems to be right: there is an issue with the module you provided.

  1. Importing the setState hook:
/* some-component.mjs */
import { useState } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module';

const MyComponent = () => {
  const [state, setState] = useState(0);
  // ... the rest code
};

And what I've got in the console:
image

@JoviDeCroock
Copy link
Member

There's no issue for me when I run my example, could you fork it and change however the issue is caused?

@pokatomnik
Copy link
Author

Yes, I figured out that hooks are working fine: https://jsfiddle.net/7mh09vx4/3/
I appreciate your effort, @sventschui, @JoviDeCroock. Thank you!

@pokatomnik
Copy link
Author

I think, the problem is with the latest word you used. The @latest means that you want to use the latest available version of the package. I wanted to define version I need, the latest one (at this moment). And if you define a particular version, the preact minified code will not update the version, It is still using the latest. And this is the reason of this issue.

@pokatomnik
Copy link
Author

pokatomnik commented Aug 20, 2020

For future searchers, here is a simple snippet for importing the Preact as the native Ecmascript module:

  • The Skypack CDN is used as the only one which has the ES modules CDN I found (yes, the unpkg has this feature as well, but It is still experimental)
  • The HTM is also included as a good replacement for the JSX.
import * as _Preact from 'https://cdn.skypack.dev/[email protected]';
import * as _Hooks from 'https://cdn.skypack.dev/[email protected]/hooks';
import htm from 'https://cdn.skypack.dev/[email protected]';
export const html = htm.bind(_Preact.h);
export default _Preact;
export const Hooks = _Hooks;

I developed a simple template (or an example, as you wish). It's an explanation how to set up skypack CDN's preact to be used with the Typescript.

@vyushin
Copy link

vyushin commented Mar 21, 2021

The same error. I think this is because hooks.mjs imports latest version of preact for every version. Make an issue #3074
image

@pokatomnik
Copy link
Author

@vyushin, the solution is not to use CDN you tried to use. ES modules feature they introduced is experimental. I have prepared a snippet, and It works just fine for me. Have you tried It?

@joel-chu
Copy link

Having the same problem, when using it with next.js and the trace indicate webpack is import the module from preact/hooks/dist/hooks.module.js

@JMPSequeira
Copy link

Was facing these exact issue with the typescript template.

I was using the preact watch command and as soon as I used npm run dev everything works.
Not sure if related or not but direct call do preact watch uses ts 4.2.4 and run dev uses 4.6.2.

@FunctionDJ
Copy link

In case anyone else comes here that aliases react to preact/compat: It seems like at least with Next.js, preact/compat is not yet fully compatible with React 18. Installing React/React-DOM 17 fixed an error for me that was similar to this one which occurred when trying to navigate.

@danielweck
Copy link

my workaround with preact/hooks has been to delete the sub-package.json so that the top-level export map in Preact's root package.json is used instead in a type=module context. otherwise I get runtime issues due to mixed CJS / ESM module loading

@DylanMashini
Copy link

DylanMashini commented Jul 10, 2022

Having this error on pages that use next-mdx-remote. Any idea what causes this? It doesn't happen when I comment it out, then load the page, then uncomment it. (in dev mode) I think this is because it only happens on server renders, not on client renders.
Here's a minimum reproducible example

@GabrielDelepine
Copy link

If you are using a CDN such as esm.sh, you could be loading preact twice (check at your network panel)

@al6x
Copy link

al6x commented Jun 27, 2024

Same problem

@marvinhagemeister
Copy link
Member

For everyone coming across this thread: This error means that you have multiple copies of Preact running at the same time in your project. This can be caused by various reasons. Please make sure you only use one copy of Preact.

@sant123
Copy link

sant123 commented Jul 6, 2024

For everyone coming across this thread: This error means that you have multiple copies of Preact running at the same time in your project. This can be caused by various reasons. Please make sure you only use one copy of Preact.

In case of importing through esm.sh like signals, be sure to specify external=preact so it is not loaded twice:

"@preact/signals": "https://esm.sh/@preact/[email protected]?external=preact"

Thank you so much @marvinhagemeister

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests