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

jimmyandrade · 2020-08-11T17:55:44Z

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

Clone the repo https://github.com/natura-cosmeticos/natds-js/tree/renovate/major-storybook-monorepo;
Switch to the branch renovate/major-storybook-monorepo;
Run yarn install to install all dependencies;
Go to packages/web and, if needed, run yarn install again;
Run yarn run storybook:start;
Open http://localhost:5000/ (if needed);
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)

The text was updated successfully, but these errors were encountered:

shilman · 2020-08-12T04:18:45Z

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 · 2020-08-12T09:29:49Z

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 · 2020-08-12T09:33:12Z

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: #11373 (comment)

gabrielseco · 2020-08-12T09:35:44Z

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

thebuilder · 2020-08-12T11:54:56Z

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 · 2020-08-12T11:59:44Z

@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 · 2020-08-12T12:09:02Z

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 · 2020-08-12T12:17:22Z

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 · 2020-08-12T17:51:33Z

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 · 2020-08-13T00:31:42Z

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

wtanna · 2020-08-13T00:39:31Z

@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 · 2020-08-13T00:39:56Z

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 · 2020-08-13T00:41:35Z

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 · 2020-08-13T00:41:42Z

@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 · 2020-08-13T17:39:10Z

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 · 2020-08-13T20:10:48Z

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 · 2020-08-14T11:21:11Z

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

mark-carlson · 2020-08-14T18:50:53Z

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

silouanwright · 2020-08-14T22:28:30Z

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

markwoon · 2020-08-16T23:55:26Z

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 · 2020-08-18T13:10:14Z

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

ref. storybookjs/storybook#11904

storybookjs/storybook#11904

- storybookjs/storybook#11904

jizusun · 2020-10-21T09:19:26Z

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 · 2020-10-22T17:48:08Z

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

Zertz · 2020-10-23T13:21:34Z

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 · 2020-10-26T11:17:25Z

@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 · 2020-10-27T10:44:00Z

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.

josemotanet · 2020-10-27T12:07:37Z

@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 · 2020-10-28T10:24:35Z

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 · 2020-10-28T12:54:11Z

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 · 2020-10-28T12:58:05Z

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

webhacking · 2020-10-29T06:53:14Z

--no-dll works with React 17 as well

josiah-roberts · 2020-10-30T02:40:21Z

Hey everyone,

Now I was able to get Storybook working:
I've removed all *storybook* dependencies from my package.json;

I've deleted the node_modules folder;

I've locked react and react-dom versions on my package.json to 16.13.1;
I've added the following resolutions to my package.json:
{
  "resolutions": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}
I've removed react dependencies from workspaces.nohoist on my package.json;

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 · 2020-10-30T04:52:56Z

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 · 2020-11-02T18:41:35Z

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 · 2020-11-03T00:20:04Z

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

npx create-react-app myApp
npx sb init

shilman · 2020-11-03T04:53:26Z

Duplicate to #12408

thany · 2020-11-05T14:45:26Z

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 · 2020-11-05T23:50:54Z

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

baptisteArno · 2022-02-08T16:28:30Z

My library is importing a component from a package that has:

"peerDependencies": {
    "react": "^17.0.2"
  },

I tried everything described in this issue. Nothing seems to solve the problem. Any idea?

eric-burel · 2022-02-09T07:53:01Z

My library is importing a component from a package that has:
"peerDependencies": {
    "react": "^17.0.2"
  },
I tried everything described in this issue. Nothing seems to solve the problem. Any idea?

Are you sure it's actually related? A peer dependency is the correct way to depend on React, so it's most probably not your issue. If you stop importing this package, it does work again? How is "react-dom" installed?

baptisteArno · 2022-02-09T07:54:15Z

Yes sorry for the noise, it wasn't related at all 😄. Thank you for your answer @eric-burel

ZhengRui · 2023-05-20T03:12:54Z

@shilman After upgraded to SB v7, I am stucked with a similar issue for couple days, can you help unblocking me. I am writing a react lib with "react" and "react-dom" as peer dependency, then I have a seperate storybook project demoing the usage of the lib.

The package.json of the lib:

{
  "name": "sdk",
  ...,
  "scripts": {
    "dev": "NODE_ENV=development rollup -c -w --bundleConfigAsCjs",
    "build": "NODE_ENV=production rollup -c --bundleConfigAsCjs",
    "test": "jest",
    "test:watch": "jest --watch",
    "lint": "eslint '*.{js,json}' 'src/**/*.{ts,tsx}'",
    "lint:fix": "eslint --fix '*.{js,json}' 'src/**/*.{ts,tsx}'",
    "prettier": "prettier -w src .github",
    "prettier:check": "prettier --check src .github",
    "dry-run-release": "semantic-release --dry-run"
  },
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.esm.js",
      "types": "./dist/index.d.ts"
    },
    "./components": {
      "require": "./dist/index.js",
      "import": "./dist/index.esm.js",
      "types": "./dist/components/index.d.ts"
    },
    "./stores": {
      "require": "./dist/index.js",
      "import": "./dist/index.esm.js",
      "types": "./dist/stores/index.d.ts"
    },
    "./hooks": {
      "require": "./dist/index.js",
      "import": "./dist/index.esm.js",
      "types": "./dist/hooks/index.d.ts"
    }
  },
  "typesVersions": {
    "*": {
      "components": [
        "dist/components"
      ],
      "stores": [
        "dist/stores"
      ],
      "hooks": [
        "dist/hooks"
      ]
    }
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@commitlint/cli": "^17.0.3",
    "@commitlint/config-conventional": "^17.0.3",
    "@headlessui/react": "^1.7.4",
    "@heroicons/react": "^1.0.5",
    "@rollup/plugin-commonjs": "^24.0.0",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-terser": "^0.2.1",
    "@rollup/plugin-typescript": "^10.0.1",
    "@semantic-release/changelog": "^6.0.1",
    "@semantic-release/git": "^10.0.1",
    "@tailwindcss/container-queries": "^0.1.0",
    "@testing-library/react": "^13.4.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^20.1.7",
    "@types/react": "^18.0.26",
    "@typescript-eslint/eslint-plugin": "^5.59.6",
    "@typescript-eslint/parser": "^5.59.6",
    "autoprefixer": "^10.4.1",
    "babel-jest": "^27.4.5",
    "babel-loader": "^8.2.3",
    "eslint": "^8.20.0",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^8.0.1",
    "identity-obj-proxy": "^3.0.0",
    "immer": "^9.0.12",
    "jest": "^27.4.5",
    "lint-staged": "^13.0.3",
    "postcss": "^8.4.23",
    "postcss-cli": "^9.1.0",
    "prettier": "^2.7.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^3.9.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "semantic-release": "^19.0.3",
    "tailwindcss": "^3.2.4",
    "ts-deepmerge": "^2.0.1",
    "tslib": "^2.3.1",
    "typescript": "^4.9.5",
    "webpack": "5.65.0"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "dependencies": {
    "@tanstack/react-query": "^4.24.6",
    "ace-builds": "^1.21.1",
    "echarts": "^5.3.2",
    "echarts-gl": "^2.0.9",
    "fabric": "link:../../Libs/fabric.js",
    "jotai": "^2.1.0",
    "rc-slider": "^10.1.0",
    "rc-tooltip": "^5.2.2",
    "rc-util": "^5.30.0",
    "react-ace": "^10.1.0",
    "react-resize-detector": "^9.1.0",
    "react-toastify": "^8.1.1",
    "zustand": "^4.1.1"
  }
}

The rollup.config.js to bundle the lib:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

import postcss from 'rollup-plugin-postcss';

const packageJson = require('./package.json');

const isProduction = process.env.NODE_ENV === 'production';

const deps = Object.keys(packageJson.dependencies || {});

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: !isProduction,
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: !isProduction,
      },
    ],
    watch: {
      clearScreen: false,
      include: 'src/**',
      exclude: [
        'node_modules/**',
        'dist/**',
        'examples/**',
        'src/**/*.stories.tsx',
      ],
    },
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({
        tsconfig: './tsconfig.json',
        compilerOptions: {
          sourceMap: !isProduction,
          inlineSources: !isProduction,
          ...(!isProduction && { target: 'esnext' }),
        },
      }),
      isProduction &&
        terser({
          format: {
            comments: /^\s*([@#]__[A-Z]+__\s*$|@cc_on)/,
          },
        }),
      postcss({
        config: {
          path: './postcss.config.js',
        },
        extensions: ['.css'],
        minimize: isProduction,
        extract: false,
        inject: true,
      }),
    ],
    external: (id) => {
      const [pkg] = id.split('/');
      return deps.includes(pkg);
    },
  },
];

And following is the package.json for the storybook V7 project:

{
  "name": "sdk-storybook",
  ...,
  "main": "index.js",
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.5",
    "@storybook/addon-essentials": "^7.0.12",
    "@storybook/addon-interactions": "^7.0.12",
    "@storybook/addon-links": "^7.0.12",
    "@storybook/addon-styling": "^1.0.8",
    "@storybook/blocks": "^7.0.12",
    "@storybook/react": "^7.0.12",
    "@storybook/react-webpack5": "^7.0.12",
    "@storybook/testing-library": "^0.0.14-next.2",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.23",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.0.12",
    "tailwindcss": "^3.3.2"
  },
  "dependencies": {
    "sdk": "link:../sdk",
    "echarts": "^5.4.2",
    "zustand": "^4.3.8"
  }
}

This settings works well when I am using SB v6.5 + react 17/18 + webpack5 + yarn, recently i upgraded to SB v7 + react 18 + pnpm, it works using @storybook/react-vite but can not do fast refresh, so i switch to webpack5 and any react hook calls in the lib will cause errors e.g. Cannot read properties of null (reading 'useRef'). Do you know what could be wrong here?

Cannot read properties of null (reading 'useRef')
TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (http://localhost:6006/vendors-node_modules_pnpm_react_18_2_0_node_modules_react_jsx-runtime_js-sdk_node_modules_-49b885.iframe.bundle.js:223208:21)
    at useSyncExternalStoreWithSelector (http://localhost:6006/vendors-node_modules_pnpm_react_18_2_0_node_modules_react_jsx-runtime_js-sdk_node_modules_-49b885.iframe.bundle.js:226582:17)
    at useStore (http://localhost:6006/vendors-node_modules_pnpm_react_18_2_0_node_modules_react_jsx-runtime_js-sdk_node_modules_-49b885.iframe.bundle.js:248727:17)
    at PaginationBar$1 (http://localhost:6006/PaginationBar-stories.iframe.bundle.js:38932:171)
    at renderWithHooks (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-essentials_7_0_12_react-dom_18_2_0_react_18_2_0_nod-49eb5c.iframe.bundle.js:41313:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-essentials_7_0_12_react-dom_18_2_0_react_18_2_0_nod-49eb5c.iframe.bundle.js:45077:13)
    at beginWork (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-essentials_7_0_12_react-dom_18_2_0_react_18_2_0_nod-49eb5c.iframe.bundle.js:46590:16)
    at beginWork$1 (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-essentials_7_0_12_react-dom_18_2_0_react_18_2_0_nod-49eb5c.iframe.bundle.js:52429:14)
    at performUnitOfWork (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-essentials_7_0_12_react-dom_18_2_0_react_18_2_0_nod-49eb5c.iframe.bundle.js:51560:12)
    at workLoopSync (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-essentials_7_0_12_react-dom_18_2_0_react_18_2_0_nod-49eb5c.iframe.bundle.js:51469:5)

shilman · 2023-05-20T03:17:01Z

@ZhengRui can you please open a new issue with a minimal reproduction and we'd be happy to take a look

ZhengRui · 2023-05-20T04:52:23Z

upgraded to SB v7 + react 18 + pnpm

hey @shilman , i setup a minimal reproduction, and i opened this discussion , thank you for taking a look !

bigbunty · 2023-07-03T11:20:25Z

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.

jimmyandrade mentioned this issue Aug 11, 2020

chore(deps): update storybook monorepo to v6 (major) natura-cosmeticos/natds-js#792

Closed

1 task

shilman added core help wanted needs reproduction labels Aug 12, 2020

shilman added the has workaround label Aug 14, 2020

koba04 added a commit to kufu/smarthr-ui that referenced this issue Aug 20, 2020

chore: add react and react-dom into the resolutions field

21bc532

ref. storybookjs/storybook#11904

hzhu added a commit to zendeskgarden/react-containers that referenced this issue Aug 24, 2020

add resolutions storybookjs/storybook#11904

a5bc4cd

hzhu added a commit to zendeskgarden/react-containers that referenced this issue Aug 25, 2020

Add resolutions

b5b852f

storybookjs/storybook#11904

ghost mentioned this issue Aug 26, 2020

Compatibility issues with Storybook 6 preactjs/preact#2718

Closed

jizusun added a commit to jizusun/generated-react-typescript-storybook that referenced this issue Oct 21, 2020

fix invalid hook call

aa18fd4

- storybookjs/storybook#11904

shilman mentioned this issue Oct 27, 2020

React: Apply React 17 and CRA4 fixes to master #12925

Closed

shilman mentioned this issue Oct 30, 2020

CLI: Disable DLL by default in template #12954

Merged

xwatkins mentioned this issue Nov 2, 2020

Check if --no-dll option is still needed ebi-uniprot/franklin-sites#119

Open

shilman added the duplicate label Nov 3, 2020

giorgosera mentioned this issue Nov 13, 2020

Hooks + multiple instances of React facebook/react#13991

Open

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

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

Comments

jimmyandrade commented Aug 11, 2020 • edited Loading

Describe the bug

Steps to reproduce the behavior

Expected behavior

Screenshots

System

Additional context

Trace

shilman commented Aug 12, 2020

gabrielseco commented Aug 12, 2020 • edited Loading

shilman commented Aug 12, 2020

gabrielseco commented Aug 12, 2020

thebuilder commented Aug 12, 2020

shilman commented Aug 12, 2020

thebuilder commented Aug 12, 2020

shilman commented Aug 12, 2020

wtanna commented Aug 12, 2020

shilman commented Aug 13, 2020

wtanna commented Aug 13, 2020 • edited Loading

jimmyandrade commented Aug 13, 2020 • edited Loading

jimmyandrade commented Aug 13, 2020

shilman commented Aug 13, 2020

JeremyGrieshop commented Aug 13, 2020

jimmyandrade commented Aug 13, 2020

dgomez-orangeloops commented Aug 14, 2020 • edited Loading

mark-carlson commented Aug 14, 2020 • edited Loading

silouanwright commented Aug 14, 2020

markwoon commented Aug 16, 2020

ldeveber commented Aug 18, 2020

jizusun commented Oct 21, 2020

engelmav commented Oct 22, 2020

Zertz commented Oct 23, 2020

hristof commented Oct 26, 2020

shilman commented Oct 27, 2020

josemotanet commented Oct 27, 2020

mathiassoeholm commented Oct 28, 2020

RicardoGaefke commented Oct 28, 2020

rpearce commented Oct 28, 2020

webhacking commented Oct 29, 2020

josiah-roberts commented Oct 30, 2020

jeanbrunogabriel commented Oct 30, 2020

ricardojramalho commented Nov 2, 2020 • edited by jimmyandrade Loading

galibhassan commented Nov 3, 2020

shilman commented Nov 3, 2020

thany commented Nov 5, 2020 • edited Loading

shilman commented Nov 5, 2020

baptisteArno commented Feb 8, 2022 • edited Loading

eric-burel commented Feb 9, 2022

baptisteArno commented Feb 9, 2022

ZhengRui commented May 20, 2023 • edited Loading

shilman commented May 20, 2023

ZhengRui commented May 20, 2023

bigbunty commented Jul 3, 2023

jimmyandrade commented Aug 11, 2020 •

edited

Loading

gabrielseco commented Aug 12, 2020 •

edited

Loading

wtanna commented Aug 13, 2020 •

edited

Loading

jimmyandrade commented Aug 13, 2020 •

edited

Loading

dgomez-orangeloops commented Aug 14, 2020 •

edited

Loading

mark-carlson commented Aug 14, 2020 •

edited

Loading

ricardojramalho commented Nov 2, 2020 •

edited by jimmyandrade

Loading

thany commented Nov 5, 2020 •

edited

Loading

baptisteArno commented Feb 8, 2022 •

edited

Loading

ZhengRui commented May 20, 2023 •

edited

Loading