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

[jimmyandrade]

Describe the bug

I am updating Storybook to version 6 in my project. After making some minor adjustments, such as installing two missing @types libraries, I believed that I wouldn't need to do anything else, as the Storybook would work.

Steps to reproduce the behavior

1. Clone the repo https://github.com/natura-cosmeticos/natds-js/tree/renovate/major-storybook-monorepo;
2. Switch to the branch renovate/major-storybook-monorepo;
3. Run yarn install to install all dependencies;
4. Go to packages/web and, if needed, run yarn install again;
5. Run yarn run storybook:start;
6. Open http://localhost:5000/ (if needed);
7. Open Developer Tools and look for console messages.

I also tried to delete all files inside of .storybook and keep an empty main.js, and it still does not work.

Expected behavior

The Storybook application should load, even if warnings or errors appear on the console.

Screenshots

System

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.17.0 - /usr/local/bin/node
    Yarn: 1.22.4 - ~/GitHub/natura/natds-js/node_modules/.bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4221.3
    Firefox: 78.0.1
    Safari: 13.1.1

Additional context

Trace

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.
    at resolveDispatcher (react.development.js:1431)
    at Object.useContext (react.development.js:1439)
    at useTheme (emotion-theming.browser.esm.js:112)
    at useMenu (vendors~main.62fe39d39e82bef806a4.bundle.js:107725)
    at Object.mapper [as current] (vendors~main.62fe39d39e82bef806a4.bundle.js:105271)
    at ManagerConsumer (vendors~main.62fe39d39e82bef806a4.bundle.js:143113)
    at renderWithHooks (vendors~main.62fe39d39e82bef806a4.bundle.js:20836)
    at mountIndeterminateComponent (vendors~main.62fe39d39e82bef806a4.bundle.js:23515)
    at beginWork (vendors~main.62fe39d39e82bef806a4.bundle.js:24629)
    at HTMLUnknownElement.callCallback (vendors~main.62fe39d39e82bef806a4.bundle.js:6221)
vendors~main.62fe39d39e82bef806a4.bundle.js:25560 The above error occurred in the <ManagerConsumer> component:
    in ManagerConsumer
    in Unknown (created by Layout)
    in div
    in Styled(div) (created by Sidebar)
    in Sidebar (created by Layout)
    in Layout
    in WithTheme(Layout)
    in Unknown
    in div
    in Styled(div)
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
logCapturedError @ vendors~main.62fe39d39e82bef806a4.bundle.js:25560
vendors~main.62fe39d39e82bef806a4.bundle.js:4168 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.
    at resolveDispatcher (react.development.js:1431)
    at Object.useContext (react.development.js:1439)
    at useTheme (emotion-theming.browser.esm.js:112)
    at useMenu (vendors~main.62fe39d39e82bef806a4.bundle.js:107725)
    at Object.mapper [as current] (vendors~main.62fe39d39e82bef806a4.bundle.js:105271)
    at ManagerConsumer (vendors~main.62fe39d39e82bef806a4.bundle.js:143113)
    at renderWithHooks (vendors~main.62fe39d39e82bef806a4.bundle.js:20836)
    at mountIndeterminateComponent (vendors~main.62fe39d39e82bef806a4.bundle.js:23515)
    at beginWork (vendors~main.62fe39d39e82bef806a4.bundle.js:24629)
    at HTMLUnknownElement.callCallback (vendors~main.62fe39d39e82bef806a4.bundle.js:6221)
vendors~main.62fe39d39e82bef806a4.bundle.js:25560 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ vendors~main.62fe39d39e82bef806a4.bundle.js:25560
vendors~main.62fe39d39e82bef806a4.bundle.js:17135 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.
    at resolveDispatcher (react.development.js:1431)
    at Object.useContext (react.development.js:1439)
    at useTheme (emotion-theming.browser.esm.js:112)
    at useMenu (vendors~main.62fe39d39e82bef806a4.bundle.js:107725)
    at Object.mapper [as current] (vendors~main.62fe39d39e82bef806a4.bundle.js:105271)
    at ManagerConsumer (vendors~main.62fe39d39e82bef806a4.bundle.js:143113)
    at renderWithHooks (vendors~main.62fe39d39e82bef806a4.bundle.js:20836)
    at mountIndeterminateComponent (vendors~main.62fe39d39e82bef806a4.bundle.js:23515)
    at beginWork (vendors~main.62fe39d39e82bef806a4.bundle.js:24629)
    at HTMLUnknownElement.callCallback (vendors~main.62fe39d39e82bef806a4.bundle.js:6221)

[shilman]

Do you have a minimal repro for this? This project takes 10m to install on my (fast) machine & the build errors on something unrelated to storybook.

[gabrielseco]

Only happened to me after I installed the new React RC version.

Probably the error was having multiple copies of React

If anyone interested, worked for me with [email protected] and [email protected]

[shilman]

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

[gabrielseco]

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

[thebuilder]

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

[shilman]

@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.

[thebuilder]

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.

[shilman]

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.

[wtanna]

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 "[email protected]"
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#[email protected]"
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#[email protected]"
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#[email protected]"
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#[email protected]"
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 "[email protected]"
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!

[shilman]

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

[wtanna]

@shilman I used yarn upgrade-interactive --latest, and after I did that I did not have any old versions that I could see. This was/is my list of @storybook packages when I ran yarn list | grep storybook

├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/semver@^7.3.2
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/semver@^7.3.2
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/semver@^7.3.2
├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/semver@^7.3.2
│  ├─ @storybook/[email protected]

[jimmyandrade]

Do you have a minimal repro for this? This project takes 10m to install on my (fast) machine & the build errors on something unrelated to storybook.

@shilman unfortunately, I haven't been able to create a minimal repository yet. I will try some fixes and, if nothing works, I try to create this minimal repository. Thank you very much :)

[jimmyandrade]

Only happened to me after I installed the new React RC version.

Probably the error was having multiple copies of React

If anyone interested, worked for me with [email protected] and [email protected]

@gabrielseco I'm trying with version 6.0.5, I didn't get to use RC versions.
I'm checking the possibility of having multiple versions of react...

[shilman]

@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.

[JeremyGrieshop]

I had this problem, then literally just upgraded from 6.0.5 to 6.0.6 via "npx sb upgrade" and voila, all is working!

[jimmyandrade]

I had this problem, then literally _just_ upgraded from 6.0.5 to 6.0.6 via "npx sb upgrade" and voila, all is working!

@JeremyGrieshop I tried to upgrade to 6.0.6 but it still doesn't work 😢

[dgomez-orangeloops]

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

[mark-carlson]

I was able to solve this problem by removing the main.js file and restoring my config.ts file:

/*  eslint  @typescript-eslint/explicit-function-return-type: 0 */
import { configure, addParameters, addDecorator } from '@storybook/react';
import StoryRouter from 'storybook-react-router';
// import { withInfo } from '@storybook/addon-info';
import 'styles/Main.css';
import 'styles/App.css';
import 'i18nLoader';
// Import all locales here.  English is not required.
import 'moment/locale/es';
import 'moment/locale/nb';

//default to not show actions panel.  This can be overwritten in component stories.
addParameters({
    options: {
        showPanel: false,
    },
});

// addDecorator(withInfo);
addDecorator(StoryRouter());

// automatically import all files ending in *.stories.tsx
function loadStories() {
    const req = require.context('../stories', true, /\.stories\.tsx$/);
    req.keys().forEach(req);
}

configure(loadStories, module);

Although I get this deprecation warning:

Loading config/preview file in "./.storybook". (node:22525) DeprecationWarning: Configuration files such as "config", "presets" and "addons" are deprecated and will be removed in Storybook 7.0. Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md

At least I don't get the "Invalid hook call" errors and storybook works (for now).

[reywright]

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

[markwoon]

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.

[ldeveber]

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! :D

[davidcalhoun]

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)

[mark-carlson]

I was able to solve this problem by removing the main.js file and restoring my config.ts file:

Update to my comment above. I was able to get it to work removing this config.ts file, upgrading to v6.0.21, and moving relevant file imports to a new preview.ts file. Thank you!

[jimmyandrade]

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:
   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 ❤️

[shilman]

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

[eric-burel]

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?

[shilman]

@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

[dburles]

Suffering the same issue here as I'm on experimental React. No issues previously with version 5.

[dburles]

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

[EmreErdogan]

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

I was following the instructions in Intro to Storybook and got this error. Running npx sb upgrade solved the problem.

[jizusun]

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

[engelmav]

This helped me as well. Thanks for posting your solution.

[Zertz]

We use npm and ran into the same issue. I fixed it by uninstalling all the storybook packages (which cleaned up package-lock) and then reinstalling with npx sb init

Note that this will overwrite your storybook config so make sure to check the diff and restore your customizations.

[hristof]

@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.

[shilman]

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.

[josemotanet]

@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.

[mathiassoeholm]

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)

[RicardoGaefke]

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.

[rpearce]

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

[webhacking]

--no-dll works with React 17 as well

[josiah-roberts]

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:
   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.

[jeanbrunogabriel]

Hey everyone. I was suffering the same error, but on a fresh new "create-react-app". Workaround by:

(re)Installing storybook specifying type npx -p @storybook/cli sb init -f --type react
Adding support for create react app manually yarn add @storybook/preset-create-react-app

[ricardojramalho]

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.

[galibhassan]

Same issue. Can't load any story. I only used the following two commands:

• npx create-react-app myApp
• npx sb init

[shilman]

Duplicate to #12408

[thany]

I'm getting this problem as well, unless I remove the component property from every one of our CSF stories:

export default {
  title: 'AwesomeComponent',
  // component: AwesomeComponent,
};

I don't know if it's one component causing this issue, or all of them, or some of them, but I don't want to find out, because it's not the components that are written incorrectly. Our linting rules should catch if hooks are incorrectly used, and linting the entire project products no errors and no warnings.

@shilman Can you please provide a workaround or fix in Storybook 6.0 where we can still have the component property in CSF stories, or should I just leave them commented out for now, even though the documentation clearly says it's a good idea to have them?

[shilman]

@thany No. The fix for this is destabilizing, so we are releasing it as quickly as possible in 6.1.