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

Created on 11 Aug 2020  Β·  47Comments  Β·  Source: storybookjs/storybook

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

image

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)
core duplicate has workaround help wanted needs reproduction
Source
picture jimmyandrade
👍47

Most helpful comment

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
picture thebuilder on 12 Aug 2020
👍25 ❤7 👎2

All 47 comments

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 picture shilman on 12 Aug 2020
👀1

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 picture gabrielseco on 12 Aug 2020
👀1

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

shilman picture shilman on 12 Aug 2020
❤3

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

gabrielseco picture gabrielseco on 12 Aug 2020
👀1 👍1

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
thebuilder picture thebuilder on 12 Aug 2020
👍25 ❤7 👎2

@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 picture shilman on 12 Aug 2020

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.

thebuilder picture thebuilder on 12 Aug 2020
❤1

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.

shilman picture shilman on 12 Aug 2020
👍2

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!

wtanna picture wtanna on 12 Aug 2020
👍7 ❤4

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

shilman picture shilman on 13 Aug 2020
👍1

@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]
wtanna picture wtanna on 13 Aug 2020

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 picture jimmyandrade on 13 Aug 2020

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

jimmyandrade picture jimmyandrade on 13 Aug 2020

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

shilman picture shilman on 13 Aug 2020
👍1

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 picture JeremyGrieshop on 13 Aug 2020

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 😒

jimmyandrade picture jimmyandrade on 13 Aug 2020

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

dgomez-orangeloops picture dgomez-orangeloops on 14 Aug 2020
👍6

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

mark-carlson picture mark-carlson on 14 Aug 2020

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

reywright picture reywright on 15 Aug 2020
👎4 👍1

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.

markwoon picture markwoon on 17 Aug 2020
👍1

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

ldeveber picture ldeveber on 18 Aug 2020
🚀2 👍2 ❤1

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)

davidcalhoun picture davidcalhoun on 31 Aug 2020
👍3

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!

mark-carlson picture mark-carlson on 1 Sep 2020

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 ❀️

jimmyandrade picture jimmyandrade on 6 Sep 2020
👍3 🎉2 ❤1

phew @jimmyandrade ! glad you got it working!! πŸ˜…

shilman picture shilman on 8 Sep 2020
❤1

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?

eric-burel picture eric-burel on 9 Sep 2020
👍1

@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

shilman picture shilman on 10 Sep 2020
❤1

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

dburles picture dburles on 17 Sep 2020

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

dburles picture dburles on 17 Sep 2020
👍1

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

EmreErdogan picture EmreErdogan on 5 Oct 2020

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
jizusun picture jizusun on 21 Oct 2020
👍5

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

engelmav picture engelmav on 22 Oct 2020

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.

Zertz picture Zertz on 23 Oct 2020

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

hristof picture hristof on 26 Oct 2020
👍3

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.

shilman picture shilman on 27 Oct 2020
❤3 🎉2 👍1

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

josemotanet picture josemotanet on 27 Oct 2020
👍1

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)
mathiassoeholm picture mathiassoeholm on 28 Oct 2020
👍1

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.

RicardoGaefke picture RicardoGaefke on 28 Oct 2020
👍5

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

rpearce picture rpearce on 28 Oct 2020
👍2 ❤1 🎉1 👎1

--no-dll works with React 17 as well

webhacking picture webhacking on 29 Oct 2020
👍2

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.

josiah-roberts picture josiah-roberts on 30 Oct 2020

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

jeanbrunogabriel picture jeanbrunogabriel on 30 Oct 2020

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.

ricardojramalho picture ricardojramalho on 2 Nov 2020
👍2

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

  • npx create-react-app myApp
  • npx sb init
galibhassan picture galibhassan on 3 Nov 2020

Duplicate to #12408

shilman picture shilman on 3 Nov 2020

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?

thany picture thany on 5 Nov 2020

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

shilman picture shilman on 6 Nov 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

xogeny picture xogeny  Β·  3Comments
tirli picture tirli  Β·  3Comments
Jonovono picture Jonovono  Β·  3Comments
arunoda picture arunoda  Β·  3Comments
alexanbj picture alexanbj  Β·  3Comments