preact X type error

[Gregorein]

I'm getting undefined is not an object (evaluating 'h.__H') after building with rc3,

[Error] TypeError: undefined is not an object (evaluating 'h.__H') o (bundle.269f6.js:1:8826) i (bundle.269f6.js:1:8957) O (bundle.269f6.js:1:8604) O (bundle.269f6.js:1:16581) w (bundle.269f6.js:1:16048) k (bundle.269f6.js:1:17676) _ (bundle.269f6.js:1:13235) u (bundle.269f6.js:1:19075) pwNi (bundle.269f6.js:1:19106) e (bundle.269f6.js:1:106) (anonymous function) (bundle.269f6.js:1:1351) Global Code (bundle.269f6.js:1:1364)

what am I overlooking?

[JoviDeCroock]

We’ll need some narrowed down details since this could have several causes

One of them could be using a hook outside of a component, if you are sure you just upgraded from rc2->3 without code changes we should look for a potential regression

[Gregorein]

I built a site with preact build --no-prerender --template src/template.html, using project structure similar to one preact-cli ejects.

used dependecies are :
"devDependencies": { "babel-eslint": "^10.0.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "classnames": "^2.2.5", "eslint": "^5.8.0", "identity-obj-proxy": "^3.0.0", "if-env": "^1.0.0", "node-sass": "^4.12.0", "preact-cli": "^2.1.0", "preact-render-spy": "^1.2.1", "sass-loader": "^6.0.7" }, "dependencies": { "preact": "^10.0.0-rc.3", "preact-router": "^3.0.1", "smooth-scroll": "^12.1.5" }

the error above occurs in o function of hooks.module.js, ~after removing all hooks in the app, the error occurs anyway.~

[JoviDeCroock]

Could you try updating preact-cli to the latest version 3.0.0-rc.5

[maltium]

Having the same or a similar issue Uncaught (in promise) TypeError: Cannot read property '__H' of undefined.

Not using preact-cli, but instead a custom webpack config with TypeScript.

import { h } from 'preact';
import { useState } from 'preact/hooks';

export function TestComponent(props) {
  const [num, setNum] = useState(0);  // commenting this fixes the error
  return <div/>;
}

If the line containing the useState call is removed, the error won't occur. Other than hooks, the rest of Preact is behaving normally.

Edit: using the latest rc3 in the project. The Preact part is a small part of the project, so there's a lot of additional stuff going on.

[JoviDeCroock]

maltium your issue lacks a bit of detail about what deps etc you have, the above issue could be due to a wrong import or a dependency being wrong.

So the issue will be somewhere else in your codebase or dependencies @maltium

https://codesandbox.io/s/gifted-pike-ktv4t

[developit]

@maltium the error you're getting means preact/hooks got a copy of Preact 8.x when it imported preact, and it expects a copy of Preact 10. If you have any webpack resolve configuration set up, that would be the first place I'd look. The most common causes for this are accidental duplicate copies of Preact (8 and 10), often from dependencies that themselves depend on Preact 8.

You can quickly check for this using the following command:

npm ls | grep preact

You should see multiple preact versions listed there.

[maltium]

@developit I checked an there definitely are no copies of Preact 8 in node_modules.

I've created a repo that reproduces the issue https://github.com/maltium/repro-preact-hook

[JoviDeCroock]

When I look at the output of your bundle it's pointing to different bundles of Preact (Preact seems to be bundled in multiple times)

Adding:

resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".js"],
    alias: {
      preact: path.resolve(__dirname, 'node_modules', 'preact'),
      'preact/hooks': path.resolve(__dirname, 'node_modules', 'preact', 'hooks'),
    }
  },

To your webpack.config.js does not only reduce bundle size it also removes the error, note that a setup like this would fail with any framework.