Uncaught TypeError: Cannot read properties of undefined (reading '__H')

[ljmerza]

I keeo getting this error when trying to use hooks in child components. I used the preact-cli to build a simple scaffold. Not sure why this is happening. I see this discussion but i am not using anr url imports only the basic preact-cli v10.7.3

[developit]

Typically this error happens when a component is called directly as a function (which isn't a valid way to invoke a component):

function Foo(props) {
  const [x] = useState()

  return <span>{x}</span>
}

Foo()

[ljmerza]

so looks like it happens when preact is a submodule. I have a preact component with a hook in it inside a submodule and the submodule's libraries are installed. Then in the parent repo I import that submodule component, I get this error. The component is used as <Component /> not called as a function.

[ljmerza]

was able to reproduce on a simple example. Pull this branch then pull the submodules git submodule update --init --recursive. run npm ci inside the src/preact-submod folder (the submodule) and npm ci in the root folder. Run npm run dev and try to go to the home page - i will get Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__H')

https://github.com/ljmerza/preact-error

the issue is the submodule npm ci. If i dont do this then its fine. The issue is when you have typescript and the submodule has definitions the parent repo does not. This is why you have to install node_modules inside the submodule.

[ljmerza]

The problem is there are two version of preact. The solution is to set this in the preact config file:

export default (config, env, helpers) => {
  config.resolve.alias.preact = `${env.cwd}/node_modules/preact`;
}

React has the same issue facebook/react#13991

[fcFn]

Maybe this will help someone: I was adding a shadcn component into an app in an NX monorepo with root shared node_modules and that created a new node_modules directory in the app directory when it was installing dependencies which most likely resulted in multiple preact instances being loaded.

[stagas]

For folks using Vite and encountering this issue the solution is to dedupe in vite.config:

  resolve: {
    dedupe: ["preact", "preact/hooks", "preact/jsx-runtime"],
  },