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

[pokatomnik]

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]

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]

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:

[JoviDeCroock]

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

[pokatomnik]

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

[pokatomnik]

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]

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]

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

[pokatomnik]

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

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]

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]

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]

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]

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]

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

[al6x]

Same problem

[marvinhagemeister]

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]

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