storybook: [Bug] "Invalid hook call" error after upgrading to Storybook 6

It’s caused by multiple versions of React being loaded - @storybook/ui most likely contains its own version of React.

Fixes:

• If running React 16.x, delete yarn.lock and run yarn again. This should ensure the versions gets aligned.
• Use resolutions to force a specific version of React
• Run yarn why react to ensure only one version exists

We are running into this issue as well. All the @storybook packages/addons are at 6.0.4. Deleting yarn.lock fixes the issue, but that isn’t ideal.

When I ran yarn why react I got the following

=> Found "react@16.13.1"
info Has been hoisted to "react"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "244KB"
info Disk size with unique dependencies: "496KB"
info Disk size with transitive dependencies: "576KB"
info Number of shared dependencies: 5
=> Found "@storybook/addon-actions#react@16.10.2"
info This module exists because "@storybook#addon-actions" depends on it.
info Disk size without dependencies: "276KB"
info Disk size with unique dependencies: "528KB"
info Disk size with transitive dependencies: "608KB"
info Number of shared dependencies: 5
=> Found "@storybook/api#react@16.10.2"
info This module exists because "@storybook#addon-actions#@storybook#api" depends on it.
info Disk size without dependencies: "276KB"
info Disk size with unique dependencies: "528KB"
info Disk size with transitive dependencies: "608KB"
info Number of shared dependencies: 5
=> Found "@storybook/components#react@16.10.2"
info This module exists because "@storybook#addon-actions#@storybook#components" depends on it.
info Disk size without dependencies: "276KB"
info Disk size with unique dependencies: "528KB"
info Disk size with transitive dependencies: "608KB"
info Number of shared dependencies: 5
=> Found "@storybook/ui#react@16.10.2"
info This module exists because "@storybook#react#@storybook#core#@storybook#ui" depends on it.
info Disk size without dependencies: "276KB"
info Disk size with unique dependencies: "528KB"
info Disk size with transitive dependencies: "608KB"
info Number of shared dependencies: 5

I then saw that Storybook brought in 16.8.3 and yarn added it as an extra entry in the lock file. I deleted version 16.8.3 of react and react-dom from the lock file and ran yarn install. This fixed our issue!

-react-dom@^16.13.1:
+react-dom@^16.13.1, react-dom@^16.8.3:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
@ -12361,16 +12361,6 @@ react-dom@^16.13.1:
    prop-types "^15.6.2"
    scheduler "^0.19.1"

-react-dom@^16.8.3:
-  version "16.10.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.10.2.tgz#4840bce5409176bc3a1f2bd8cb10b92db452fda6"
-  integrity sha512-kWGDcH3ItJK4+6Pl9DZB16BXYAZyrYQItU4OMy0jAkv5aNqc+mAKb4TpFtAteI6TJZu+9ZlNhaeNQSVQDHJzkw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.16.2"

-react@^16.13.1:
+react@^16.13.1, react@^16.8.3:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
@ -12656,15 +12646,6 @@ react@^16.13.1:
    object-assign "^4.1.1"
    prop-types "^15.6.2"

-react@^16.8.3:
-  version "16.10.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.10.2.tgz#a5ede5cdd5c536f745173c8da47bda64797a4cf0"
-  integrity sha512-MFVIq0DpIhrHFyqLU0S3+4dIcBhhOvBE8bJ/5kHPVOVaGdo0KuiQzpcjCPsf585WvhypqtrMILyoE2th6dT+Lw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"

When running yarn why react again I got the following

=> Found "react@16.13.1"
info Has been hoisted to "react"
info Reasons this module exists
   - Specified in "devDependencies"
   - Hoisted from "@storybook#addon-actions#react"
   - Hoisted from "@storybook#addon-actions#@storybook#api#react"
   - Hoisted from "@storybook#addon-actions#@storybook#components#react"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#ui#react"
info Disk size without dependencies: "244KB"
info Disk size with unique dependencies: "496KB"
info Disk size with transitive dependencies: "576KB"
info Number of shared dependencies: 5

Another solution is to add the React Version you need in the resolutions property in package.json

  "resolutions": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },

Thank you @thebuilder for pointing me in the right direction!

Still not working using sb 6.0.7 and react 17.0.0-rc.0

I believe this is fixed in 6.1-alpha by https://github.com/storybookjs/storybook/pull/12874
and https://github.com/storybookjs/storybook/pull/12908

Please try it out and report back:

npx sb upgrade --prerelease

We’re currently working on getting these changes back into the stable release.

Hey everyone,

Now I was able to get Storybook working:

1. I’ve removed all *storybook* dependencies from my package.json;
2. I’ve deleted the node_modules folder;
3. I’ve locked react and react-dom versions on my package.json to 16.13.1;
4. I’ve added the following resolutions to my package.json:

   {
     "resolutions": {
       "react": "^16.13.1",
       "react-dom": "^16.13.1"
     }
   }
   

5. I’ve removed react dependencies from workspaces.nohoist on my package.json;
6. I’ve installed Storybook from zero using npx sb init.

So I’m gonna close this issue. Thank you all ❤️

Upgrading @storybook/react and @storybook/addon-knobs to @next fixed it for me just now.

I believe this is fixed in 6.1-alpha by #12874 and #12908

Please try it out and report back:

npx sb upgrade --prerelease

We’re currently working on getting these changes back into the stable release.

This worked like a charm for me.

I was following the Install Storybook and got this error. package.json here: https://github.com/jizusun/generated-react-typescript-storybook/blob/main/package.json

Run the followings solved the problem.

rm yarn.lock
yarn

Another solution is to add the React Version you need in the resolutions property in package.json

  "resolutions": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },

Can confirm that this solved the problem for us. Storybook 6 here we come! 😄

I can confirm that deleting my yarn.lock file fixed this issue for me.

Hi, I had the same issue, it’s a bit unexpected when you are excited discovering a quite new world (react + storybook) and after 5 minutes you are stuck in dependencies “deadlock”. The new version React 17 seems not to be compatible with Storybook 6.0 (latest stable version). I followed the recommendations and I upgraded to SB 6.1.0 alpha version and it works (how confident may I be to proceed with this weak dependency ?)!

Thanks for your support.

@jizusun’s solution worked for me, but I believe until this issue is fixed, this should be at least mentioned in the get started tutorial here: https://www.learnstorybook.com/intro-to-storybook/react/en/get-started/

This seems to be a great library, but the start sure is rough! Not being able to just start following the tutorial and waisting a lot of time looking for how to fix this issue is just plain sad.

I was getting a similar error, traced back to react-textarea-autosize:

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
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    React 2
    TextareaAutosize react-textarea-autosize.browser.esm.js:174
    React 17
    renderDocs StoryRenderer.js:424
    renderStoryIfChanged StoryRenderer.js:270
    renderCurrentStory StoryRenderer.js:191
    setupListeners StoryRenderer.js:119
    handleEvent index.js:196
    handleEvent index.js:195
    handler index.js:121
    emit index.js:128
    setSelection story_store.js:822
    setupListeners story_store.js:339
    handleEvent index.js:196
    handleEvent index.js:195
    Channel index.js:85
    handler index.js:146
    handleEvent index.js:320
storybook_docs_dll.js line 12428 > eval:1431:17
    React 2
    TextareaAutosize react-textarea-autosize.browser.esm.js:174
    React 17
    renderDocs StoryRenderer.js:424
    renderStoryIfChanged StoryRenderer.js:270
    renderCurrentStory StoryRenderer.js:191
    setupListeners StoryRenderer.js:119
    handleEvent index.js:196
    forEach self-hosted:216
    handleEvent index.js:195
    handler index.js:121
    emit index.js:128
    setSelection story_store.js:822
    setupListeners story_store.js:339
    handleEvent index.js:196
    forEach self-hosted:216
    handleEvent index.js:195
    Channel index.js:85
    handler index.js:146
    handleEvent index.js:320
    handleEvent self-hosted:1171

Sure enough, the latest version of react-textarea-autosize (8.2.0) depends on react 16.13.1, leading to that third condition (3. You might have more than one copy of React in the same app).

Downgrading to react 16.13.1 fixed the error.

EDIT: since I’m using Yarn, I just switched to forcing dependencies to user React 17 using resolutions (see the comment by @thebuilder)

I’ve also seen issues where there are multiple copies of @storybook/* installed because of some addon that depends on 5.3. This can cause a rendering error which gets the same message but has nothing to do with react versions. If you’re seeing this, also do an npm ls | grep storybook and see if there are any mixed versions.

See for example: https://github.com/storybookjs/storybook/issues/11373#issuecomment-672570880

Hi @shilman and @ZhengRui , I am also facing same error with SB v7 + react 18.2.0 +webpack5. Is there any solution for this issue.

--no-dll works with React 17 as well

Fair enough. I wanted to clarify for anyone who comes to this issue so that they don’t overfit, especially when it explicitly warns about multiple versions of React in the error.

Pretty sure the specific error in this issue, is caused by mismatching React versions. I got the same stacktrace trying to run Storybook after upgrading to 6.0, and aligning React solved it.

...
    at resolveDispatcher (react.development.js:1431)
    at Object.useContext (react.development.js:1439)
    at useTheme (emotion-theming.browser.esm.js:112)

It fails to share the emotion theme context between different React versions.

The issue (#11373) you’re linking too has a different Stacktrace - properly also caused by mismatching dependencies.

Hey everyone,

Now I was able to get Storybook working:

1. I’ve removed all *storybook* dependencies from my package.json;
2. I’ve deleted the node_modules folder;
3. I’ve locked react and react-dom versions on my package.json to 16.13.1;
4. I’ve added the following resolutions to my package.json:

   {
     "resolutions": {
       "react": "^16.13.1",
       "react-dom": "^16.13.1"
     }
   }
   

5. I’ve removed react dependencies from workspaces.nohoist on my package.json;
6. I’ve installed Storybook from zero using npx sb init.

So I’m gonna close this issue. Thank you all

Followed these instructions, with no effect. Still getting the same error.

You don’t have to delete your entire lock file.

Simply remove all dependencies that rely on React. See which ones by running yarn why react.

Running yarn why react should only show one React version now.

Install the dependencies again and yarn will resolve to the same React version (if they are compatible). Run yarn why react to verify that only one version is installed.

Bonus, add this script to CI to make sure you don’t end up in this situation again:

#!/bin/bash
HOW_TO_FIX="If you got this error after updating React, you might have to temporarily remove the other dependencies that rely on React, such as Storybook. This will remove the extra React versions from the lock file. Then add the latest version of these dependencies and yarn should resolve to the same version of React."
VERSIONS_OF_REACT=$(yarn why react | grep -cF "=> Found") && [[ $VERSIONS_OF_REACT == 1 ]] || (echo "Found $VERSIONS_OF_REACT versions of React in dependencies, there should only be 1. $HOW_TO_FIX" && false)

@shilman thanks to the team for putting in that effort into the prerelease.

I just upgraded to it and my create-react-library project correctly serves Storybook in the browser. I’ve locked react and react-dom to v16.13.1 though.

I should attempt some tests with v17 at a later stage.

Simple reproduction: https://github.com/dburles/sb-react-bug. Also have the same issue with the latest alpha, v6.1.0-alpha.10

@eric-burel we’re revamping a bunch of this stuff in 6.1, like https://github.com/storybookjs/storybook/pull/11628 and also removing the webpack DLLs which also cause lots of dependency sensitivity

Hi, I still see this issue after following all steps. This issue might worth being kept open? It is not really normal to have to set resolutions for SB to work.

(Not related but congrats on the npx sb init on Next, I have just noticed that it even create a demo story for pages! actually after digging it does not seems to be a page in Next meaning ^^)

Edit: removed my error logs, issue is fixed for me eventually. To fix the issue, I needed to check also yarn why react-dom. I forgot that I had lock React version in the package.json (16.10.0 instead of ^16.10.0) so it installed both 16.10.1.

Is there an explanation as to why Storybook is more sensitive to those mismatch nowadays?

phew @jimmyandrade ! glad you got it working!! 😅

Not sure if this is the same issue, but I’m also getting the Invalid hook call error via EffectOnMount.

This was with react 17.0.0-rc.0, and downgrading to 16.13.1 resolved the issue.

@wtanna OK sorry for the false alarm. Just wanted to be sure because if some of the packages were out of date it could also lead to other problems aside from the one that this issue focuses on.

@wtanna did you use npx sb upgrade to upgrade? it looks like you might still have old versions of @storybook/* packages?

@thebuilder it’s caused by some class of errors in the rendering, not necessarily only multiple versions of React. The issue i mentioned above had a single version of React but multiple versions of @storybook/components.

@shilman makes sense because I have a custom addon depending in 5.2.8 version, I’ll update and see what happens