Preact: Build fails when using hooks

[flppv]

Hey!

First of all, thank you for a great work on updating Preact, was waiting for it and totally satisfied!

I have a weird issue when trying to build my app, which is already full of hooks:

Unable to read file: /Users/.../src/node_modules/preact/hooks/dist/hooks.mjs

TypeError: Cannot read property '__H' of undefined

When in a dev mode, everything works like a charm.

I tried to build without prerender, it didn't help :(

Any ideas on what it could be? Or maybe anyone have built preact@10 app successfully?

[developit]

Hi @flppv! This is most likely an issue with Webpack's handling of JS Modules. It might be worth trying out this webpack plugin to see if that fixes the production build.

Any chance you could set up a reproduction? I'll be trying, but it'd be great if you had something handy.

[TimPetricola]

Hey, I had the exact same issue (in a CRA app), and the plugin suggested by @developit fixes the error :)

[danieldiekmeier]

If #1331 is the same error, then it has a repro at https://github.com/weijarz/preact-x-bug-r-is-undefined

[flppv]

@developit

It might be worth trying out this webpack plugin to see if that fixes the production build.

I'd like not to eject this project if possible. (My project was created with preact-cli)

Any chance you could set up a reproduction?

Sure, just:
1) Use hooks somewhere in the app
2) Run npm run build or preact build
3) Error

@danieldiekmeier yup, indeed that error, but in my case everything works fine when I run npm run dev

[38elements]

Using Rollup can build.

[marvinhagemeister]

Fixed with #1425 :tada:

[westtrade]

Same bug with Parcel build
preact - 10.0.0-rc.0

Chrome

index.js:63 Uncaught TypeError: Cannot read property '__H' of undefined
    at c (index.js:63)
    at v (index.js:105)
    at p.App [as constructor] (App.jsx:26)
    at p.z [as render] (options.js:2)
    at P (component.js:63)
    at g (index.js:260)
    at P (component.js:63)
    at g (index.js:260)
    at P (component.js:63)
    at g (index.js:260)

Firefox

TypeError: r is undefined

[marvinhagemeister]

@westtrade Do you happen to have an incorrect import like preact/hooks/src instead of preact/hooks somewhere in your application?

[braco]

This was fixed for me by installing preact-cli@rc

[didymu5]

I'm having the same issue as @westtrade building with preact-cli widget template.
I initially reported it in https://github.com/preactjs/preact/issues/1373

"devDependencies": {
    "eslint": "^4.5.0",
    "identity-obj-proxy": "^3.0.0",
    "if-env": "^1.0.0",
    "jest": "^21.2.1",
    "microbundle": "^0.6.0",
    "node-sass": "^4.5.3",
    "preact-cli": "^2.0.2",
    "preact-widget-scripts": "^0.6.0",
    "sass-loader": "^6.0.6"
  },
  "dependencies": {
    "preact": "^10.0.0-rc.1",
    "preact-compat": "^3.17.0",
    "preact-habitat": "^3.1.0",
    "preact-render-to-string": "^5.0.6",
    "preact-router": "^2.5.7"
  },

[kaidoj]

Having same issue as @westtrade with version 10.0.0-rc.1. Problem occours when i use

import { h, Component } from 'preact'
import { useReducer } from 'preact/hooks'
import { reducer, initialState, ENLARGE } from '../../../reducers/fontSize'
import './scss/style.scss' 

const [count, dispatch] = useReducer(reducer, initialState)

export default class EnlargeText extends Component {...

"dependencies": {
    "@babel/polyfill": "^7.6.0",
    "preact": "^10.0.0-rc.1",
    "preact-render-to-string": "^5.0.6"
  },
 "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/preset-env": "^7.6.0",
    "autoprefixer": "^8.0.0",
    "babel-loader": "^8.0.6",
    "chai": "^4.0.2",
    "copy-webpack-plugin": "^4.0.1",
    "core-js": "^2.4.1",
    "cross-env": "^5.0.1",
    "css-loader": "^3.2.0",
    "eslint": "^4.1.0",
    "eslint-plugin-jest": "^21.7.1",
    "eslint-plugin-react": "^7.0.0",
    "fibers": "^3.1.1",
    "file-loader": "^1.1.7",
    "html-webpack-plugin": "^3.0.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^25.0.0",
    "json-loader": "^0.5.4",
    "mini-css-extract-plugin": "^0.8.0",
    "mkdirp": "^0.5.1",
    "ncp": "^2.0.0",
    "node-sass": "^4.12.0",
    "offline-plugin": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^2.0.3",
    "preact-cli": "^3.0.0-rc.5",
    "preact-jsx-chai": "^3.0.0",
    "preact-svg-loader": "^0.2.1",
    "raw-loader": "^0.5.1",
    "regenerator-runtime": "^0.10.3",
    "replace-bundle-webpack-plugin": "^1.0.0",
    "sass": "^1.22.10",
    "sass-loader": "^8.0.0",
    "script-ext-html-webpack-plugin": "^2.0.0",
    "sinon": "^4.2.1",
    "sinon-chai": "^2.9.0",
    "source-map-loader": "^0.2.1",
    "style-loader": "^0.21.0",
    "terser-webpack-plugin": "^2.0.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^1.0.0",
    "webpack": "^4.0.0",
    "webpack-cli": "^3.3.8",
    "webpack-modules": "^1.0.0"
  }

[cristianbote]

Hey @kaidoj would be best if you could share/create a repo with the issue. I'm recommending the repo just because it's gonna be easier to properly run the build.

Due to their functional nature they can be used in functional components and avoid many pitfalls of the [...]
https://preactjs.com/guide/v10/hooks

With the above text, it boils down to:

• Use hooks only inside functional component
• Here's an example https://preactjs.com/guide/v10/hooks#usereducer

Seems that you're using useReducer outside of a class based component. Can you amend the above and see if it works?

[kaidoj]

Hey @kaidoj would be best if you could share/create a repo with the issue. I'm recommending the repo just because it's gonna be easier to properly run the build.

Due to their functional nature they can be used in functional components and avoid many pitfalls of the [...]
https://preactjs.com/guide/v10/hooks

With the above text, it boils down to:

* Use hooks only inside functional component

* Here's an example https://preactjs.com/guide/v10/hooks#usereducer

Seems that you're using useReducer outside of a class based component. Can you amend the above and see if it works?

Hey @cristianbote !
I can confirm that this was it. I missed that sentence in documentation. Thank you for pointing this out.
Everything is working fine now.

[avbeladiya]

hello,
for me other hooks are working fine , only when i use "useMemo" it shows error

Uncaught TypeError: Cannot read property '__H' of undefined

my hook code

import { useState, useMemo } from "preact/hooks";

const defaultColumn = useMemo(
    () => ({
        Filter: DefaultColumnFilter
    }),
    []
);

not sure why only one hook has issue..

[gautam1168]

If anyone is doing this using the non-build route and getting the above error, then for me this was happening because the hook module was loading a different version of preact. You should open the https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module file and look at what preact its importing

import {options as n} from "https://unpkg.com/preact@latest?module";

You should be importing this same preact in your project as well:

import { h } from 'https://unpkg.com/preact@latest?module';

I was getting the above error when importing like this in my project:

import { h } from 'https://unpkg.com/preact?module';

[chmelevskij]

As @gautam1168 mentioned Cannot read property '__H' of undefined" can be happening because of different versions. Sometimes even preact/debug can't catch it.

In my case it was because it was monorepo and packages had different versions.