Bug: Cannot read property 'useState' of null

[haikyuu]

React version: 18.2

Steps To Reproduce

1. Install a library that doesn't support React 18 (e.g [email protected])
2. Try to use useState in a component

Link to code example: https://scrimba.com/scrim/co257466ea4774401eb77c8a6

Note that you can pause the scrim ("video") to edit code and see the result by yourself.

The current behavior

Crashes without a helpful error message

The expected behavior

Should display a helpful error message.

This issue was reported before but closed because of lack of reproduction code https://github.com/facebook/react/issues/24774 and https://github.com/facebook/react/issues/24658

[snowinmars]

I have a bug with same error message, but all the libraries use react18. I'll describe an architecture and here is a link to an example. Can you take a look, does it relative to the issue?

Arch

So, I have react18, webpack5, umd. There are several projects that linked together as local delendencies.

I link projects using /dist folder. I'm not really sure about it, but I decided to use small exports instead of linking to /src to save hard drive space.

I'm not really sure how webpack-es6 tree-shaking works, but I decided to create a bundle per source file instead of creating bundle per project. Just, well, it seems that webpack will understand it, probably. So, there is no /dist/index.js file, but a lot of /dist/**/*.(js|d.ts) files to import.

Projects

1. webpack - build-only utilites, builds as webpack.target = 'node', but I don't think they affect runtime.
2. common-react - a library with react-specific functions and components. Builds as webpack.target = 'web'
3. application - a library that renders react <App /> component. Depends on common-react, builds as webpack.target = 'web'

If you make a change in a project, be sure to build the project using yarn build and run yarn upd in target to install the new version.

Run

./bootstrap.sh # it will initialize and build all the projects
cd application
yarn start

Error

There's a react hook. When the hook imports from /application folder, it works fine. But when I import it from @snowinmars/common-react project, it fails with useObserver.ts?0fc0:122 Uncaught TypeError: Cannot read properties of null (reading 'useState')

1. If I add externals: {react: 'react'} to /common-react/webpack.config.js, hook works. But it's a hack.
2. There was a build misconfiguration, when /common-react/dist/hooks/useRequest.js bundled to 430Kb file due to it was binded with whole react. Now it doesn't - all exported files are pretty small.

So...here we are. If you need any further details - just ask)

[bigbunty]

I too getting similar error, when I'm pointing my local library in react application.

"devDependencies": { "@emerald/reactmaterial": "file:../emerald.reactmaterial/dist/emerald/reactmaterial", }

If Im install it from server, it works fine.

[rollsover]

This problem also occurred to me, stops package development completely. Need help!

[rollsover]

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

[iDestin]

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

hi! @rollsover Thank you for your method！But if delete a node_modules it will not be possible to continue development, can you tell me how you do it?

[Kiran554]

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

hi! @rollsover Thank you for your method！But if delete a node_modules it will not be possible to continue development, can you tell me how you do it?

To get rid of npm link you can also run something like npm uninstall library-name && npm install library-name --save before some release command , which will uninstall and install w/o any redundant node_modules inside the library-name package

[GGAlanSmithee]

Thanks for this @Kiran554 was driving me mad.

[donus3]

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

The workaround for me is to remove dependencies in the the package.json using prepack script and pack the library with npm pack and then install the output library-<version>.tgz file in the target project by npm install library-<version>.tgz

[silkroadnomad]

I could finally solve this issue with @rollsover 's workaround. Thank you!

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

[subhampanja2]

I am facing the same issue with my package. Please help. I used only as simple as useState hooks in one place, and its showing the same error.
npm i @subhampanja/easycrm

[sarahsporck]

I think this should be fixed if the corresponding dependencies set react as peer dependeny

The problem is that when using local packages, npm link is used, which in turn copies node_modules (project/node_modules/package/node_modules), if they are deleted, the problem is solved.

[iDestin]

The reason for this problem is that the react version in the project is inconsistent with the react version used in your package

If you use your package in a project and a certain version of react has been installed in the project. Then you install your package in this project, and a certain version of react is also installed in your package. Then you may get this error report

how to fix it?

You just need to put the react dependencies from your package into the peerDependencies

bad case

project

{
  "dependencies": {
    "react": "x.x.x",
    "react-dom": "x.x.x",
    "your package": "x.x.x"
  }
}

your package

{
  "dependencies": {
    "react": "x.x.x",
    "react-dom": "x.x.x"
  }
}

good case

project

{
  "dependencies": {
    "react": "x.x.x",
    "react-dom": "x.x.x",
    "your package": "x.x.x"
  }
}

your package

{
++  "peerDependencies": {
    "react": "x.x.x",
    "react-dom": "x.x.x"
  }
}

Maybe not right, but hopefully it will help you

https://nodejs.org/en/blog/npm/peer-dependencies/

[snowinmars]

@iDestin , in my example react and react-dom versions are equal, but it causes the bug.

[henaharon]

Hi! For me this helped. React have some new rules that causes the app to crash.

In my case it was wrong way: useEffect(async ()=>{})

good way: useEffect(()=>{ async function fetchData() {} fetchData() })

Also with cleanup

wrong way: BackHandler.addEventListener('hardwareBackPress', backAction); **return BackHandler.**removeEventListener('hardwareBackPress');

good way: BackHandler.addEventListener('hardwareBackPress', backAction); return function cleanup() { BackHandler.removeEventListener('hardwareBackPress'); };

Good luck!

[OscarJVD]

THE SOLUTION OF THIS ISSUE IS THIS! :) -> https://iws.io/2022/invalid-hook-multiple-react-instances

[snowinmars]

THE SOLUTION OF THIS ISSUE IS THIS! :) -> https://iws.io/2022/invalid-hook-multiple-react-instances

This issue is about useObserver.ts?0fc0:122 Uncaught TypeError: Cannot read properties of null (reading 'useState') bug. The article does not describe a fix. So it's not a solution - it's just related.

[rahulnikam2002]

Try npm uninstall library-name this command 1st and then npm install library-name --save. Hope this will work. <3

[ManuelGuerreroVana]

if the correspo

Didn't work for me.

[guaizi149]

add this to tsconfig.json in your project. (if not work, delete react and react-dom in your package node_modules)

[imaaditya-stack]

add this to tsconfig.json in your project. (if not work, delete react and react-dom in your package node_modules)

This worked like a charm!