Various sub-projects do have react and react-dom as dependencies resulting in hook-errors

[jookshub]

Describe the bug
Multiple react and react-dom dependencies inside of @storybook lead to the following type of error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
   3. You might have more than one copy of React in the same app

To Reproduce
e.g. https://github.com/storybookjs/storybook/blob/next/lib/components/package.json

or

1. git clone https://github.com/jookshub/storybook_cra_tsx.git
2. nvm use
3. npm i
4. npm run storybook -> broken
5. npm run storybook-fixed -> working

Expected behavior
react and react-dom should be peer-dependencies in all package.json files of @storybook or configured in a way that does not interfere with react hooks.

Screenshots

Additional context
See related solution for old issue: #4691 (comment)

[ndelangen]

related:
#11628

[VinceSJ]

I'm seeing a similar issue with a project I'm working on. I'm making changes to both my-app and ui-library which it depends on. I've run yarn link from both ends to make the ui-library available while I do dev work, but I'm now seeing "Uncaught Error: Invalid hook call..." from my-app whenever I try to run it in the local dev server. It looks like the underlying cause is that we have Storybook in the ui-library, and some of Storybook's addons have react as a direct dependency (example).

Two weird additional wrinkles:

1. Our ui-library is also available on NPM. Previously, before I had needed to do this work, I was pulling it down from NPM and everything worked fine. It was only in switching over to yarn link ui-library that React started to freak out.
2. I moved all the Storybook stuff to being listed as devDependencies in the ui-library package.json. But it looks like the way yarn link works still passes the dependencies up? Checking for what's installing react in my-app I get this:

> yarn why react

=> Found "react@16.13.1"
info Has been hoisted to "react"
info Reasons this module exists
   - Specified in "dependencies"
   - Hoisted from "ui-library#react"
   - Hoisted from "ui-library#@storybook#addon-actions#react"
   - Hoisted from "ui-library#@storybook#addon-actions#@storybook#api#react"
   - Hoisted from "ui-library#@storybook#addon-actions#@storybook#components#react"
   - Hoisted from "ui-library#@storybook#react#@storybook#core#@storybook#ui#react"

I'm also confused about the referenced PR #11628 -- isn't that the opposite of what the OP is saying in this issue? My understanding is that React is freaking out because it's seeing multiple competing instances of react/react-dom, so I thought dev-/peer-dependencies would be the way to go for Storybook.

[ndelangen]

Yes @VinceSJ there's multiple ways of solving this. I don't trust the "let's make everything a peerDependency" strategy will work at all.

I'm proposing we fix it as the bundler config level. (we already do for the manager)

[ashr81]

Shouldn't this issue going to get fixed in the latest version: React 17, as per the docs here

[molebox]

I saw a PR metioned above that fixes this. But what can we do until then? I have a clean install which was working and for some reason has now stopped working and all im getting is these hooks warnings.

Was there a fix that i missed that someone could point me towards?

[molebox]

I saw a PR metioned above that fixes this. But what can we do until then? I have a clean install which was working and for some reason has now stopped working and all im getting is these hooks warnings.

Was there a fix that i missed that someone could point me towards?

ok so i updated React to 17 and blew away node_modules and yarn.lock. Now the docs are working

[shilman]

I believe this was fixed in #12972. Closing.