Storybook: Upgrading to React 17 on app level breaks UI

[Hypnosphi]

Here's the repro: https://github.com/Hypnosphi/test-storybook-react-17

Error I get is:

react.development.js:1431 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.619dfba2fee0a3e45bd3.bundle.js:25841)
    at Object.mapper [as current] (vendors~main.619dfba2fee0a3e45bd3.bundle.js:26274)
    at ManagerConsumer (vendors~main.619dfba2fee0a3e45bd3.bundle.js:1484)
    at renderWithHooks (vendors~main.619dfba2fee0a3e45bd3.bundle.js:42664)
    at mountIndeterminateComponent (vendors~main.619dfba2fee0a3e45bd3.bundle.js:45343)
    at beginWork (vendors~main.619dfba2fee0a3e45bd3.bundle.js:46457)
    at HTMLUnknownElement.callCallback (vendors~main.619dfba2fee0a3e45bd3.bundle.js:28049)

Brief debugging showed that useTheme imports React from DLL while the rest of manager UI imports it from node_modules/@storybook/ui/node_modules/react

[shilman]

See: https://github.com/storybookjs/storybook/commit/fa3a0f137dd95b9d077cc1ffd45eb5f081c9c54c#r42051265

[Hypnosphi]

@shilman it turned out not to be the actual reason, but is worth fixing anyway

[molebox]

See: fa3a0f1#r42051265

hey @shilman I may have missed a release, has this been fixed already? Just wondering as im in the process of drawing up a proposal to introduce storybook into our workflow and the docs keep on failing due to this hook violation error.

[shilman]

@molebox not AFAIK. @Hypnosphi any ideas here?

[Hypnosphi]

Remove react from DLL?

[shilman]

I'm hoping we can get rid of the DLLs entirely in 6.1. Fingers crossed 🤞

[molebox]

I just updated to 6.1.0-alpha.10 and im am now seeing this on every canvas and the docs page doesnt work at all.

[shilman]

@molebox Did you try removing node_modules and/or lockfiles and reinstalling? Also did you try running with --no-dll?

[Hypnosphi]

Same with 16.14.0 + new JSX transform. --no-dll does help

[magic-akari]

--no-dll works with React 17 as well.

[GrossDesignCo]

+1, --no-dll worked for me with React 17 as well

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.28 containing PR #12874 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.27 containing PR #12874 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[scurrilus-funke]

Storybook v6.0.27 works only if i run it with --no-dll. Otherwise initial post of this issue is happened.
Invalid hook call. Hooks can only be called inside ...

[shilman]

@scurrilus-funke do you have repro repo i can look at?

[shayc]

@shilman try this repo, it replicates @scurrilus-funke report

https://github.com/shayc/cboard-2

[shilman]

Thanks @shayc ! Will check it out later today

[scurrilus-funke]

@scurrilus-funke do you have repro repo i can look at?

No sorry it is a private business repo. We upgraded react from 16 to 17. Our next.js react application is working well, but storybook shows described bug.

[shilman]

@shayc Hmm, it works when I install with yarn instead of npm. I also tried clearing your lockfile and reinstalling with npm but that didn't work either. All I can guess is that npm has a problem running two different versions of React (at least through a webpack DLL?!) and yarn doesn't. I'm not sure what to do about this short of disabling manager DLL as well (which is planned in #12637). In the meantime there are two workarounds...

If anybody has more ideas on this, I would love to find a better short term solution than these workarounds.

[shayc]

@shilman I've disabled DLL for now, thanks!

[dburles]

Here's a very simple reproduction, literally just the latest version of Storybook installed with React experimental https://github.com/dburles/sb-react-bug

[shilman]

@dburles thanks for the repro. seeing same as above ☝️ -- works with yarn fails with npm. not sure what to do other than the workaround. suggestions welcome!

[Hypnosphi]

@shilman we just should never include react & react-dom in the DLL

[shilman]

@Hypnosphi we want to get rid of the DLL altogether in 6.1 #12637. There's nothing special about react and react-dom. The fix that I released yesterday is effectively a hotfix to try to unblock new users that are encountering this issue on their first time using Storybook. Getting rid of the DLLs is a slightly more involved operation.

[Hypnosphi]

Special thing about react and react-dom is that they have to be a single instance in order to work correctly

[pedoe]

"yarn storybook --no-dll" works for me

[615349]

react: 17.0.1
react-dom: 17.0.1
storybook: 6.0.27

yes, i am using npm rather than yarn and I am still facing this issue
the workaround is to add --no-dll

hopefully can get a fix in 6.0.28

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.30 containing PR #12908 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

NOTE: this is hopefully fixed in 6.1 ☝️ . We need to get it back into the stable release, but are having problems with repros in CI. In the meantime if people can upgrade to 6.1 to test it out, please give it a try and report back:

npx sb upgrade --prerelease

If it doesn't work right away, try removing regenerating lockfiles.

[magedjisr]

upgrade to 6.1.0-alpha.30 works for me

    "@storybook/addon-actions": "^6.1.0-alpha.30",
    "@storybook/addon-essentials": "^6.1.0-alpha.30",
    "@storybook/addon-links": "^6.1.0-alpha.30",
    "@storybook/node-logger": "^6.1.0-alpha.30",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.1.0-alpha.30",

[bcomnes]

React 17/React-dom 17 working with storybook ^6.1.0-alpha.31 without the --no-dll flag.

Still getting a wall of peer dep warnings from all the storybook plugins though:

 % npm ls react-dom
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ └── UNMET PEER DEPENDENCY [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ └── UNMET PEER DEPENDENCY [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] 
│ └── [email protected] 
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ @storybook/[email protected]
│ │ │ └── [email protected] 
│ │ └── UNMET PEER DEPENDENCY [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected] 
│ └── [email protected] 
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── UNMET PEER DEPENDENCY [email protected] 
│ └── [email protected] 
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ @storybook/[email protected]
│ │ │ └── UNMET PEER DEPENDENCY [email protected] 
│ │ └── [email protected] 
│ └── [email protected] 
└── UNMET PEER DEPENDENCY [email protected] 

EDIT: I take it back. I removed some other dependencies that must have been satisfying something storybook wanted, now its not working with react/react-dom 17, even with --no-dll.

Looks like react-dom 17 is missing still?

EDIT 2:

Ok, I it it working again:

React 17/React-dom 17 working with storybook ^6.1.0-alpha.31

I had to add core-js ^3 to my dev deps. I guess whatever dep I removed installed that, and storybook needed it, but doesn't request it. ¯_(ツ)_/¯

[dburles]

@shilman The reproduction with React experimental I posted works on 6.1.0-alpha.31

[shilman]

Thanks @dburles we're trying to get it back into latest now 😅

[dbarrett24]

What are the odds that I finally get around to trying storybook for the first time at the same time this bug is alive. haha I have impeccable timing.

[bcomnes]

Thanks @dburles we're trying to get it back into latest now 😅

Any plans to also increase the react-dom range to support 17?

Edit, looks like there are issues with npm 7 + storybook as well.

[shilman]

Fixed in #12972 / 6.1-beta. Closing.

npx sb@next upgrade --prerelease

[lailsonbm]

Thanks, @shilman!

[thany]

Having this problem as well. I can't upgrade to a nonstable version. Can you backport the fix into 6.0 please?

Also I'm on React 16 and --no-dll doesn't fix anything.

[shilman]

@thany unfortunately we can't backport it easily. instead we're expediting the 6.1 stable release, due in a week or so.

[NeOMakinG]

Hello,

Is this supposed to work ? https://github.com/PrestaShop/prestashop-ui-kit/pull/108/files#diff-0c3746c19bb935bd629052ce8bafe30b5685b04ddf4c879ad49913c31ce59abcR1-R19

I've the same issue while trying to use a useEffect hook inside a mdx story (as I need to execute some JS after a component story is loaded, to make it work properly everytime you'r going to a story through the menu)

I was waiting for the version 6.1 to test if it works, but it looks like it doesn't :(

Maybe I'm not using it properly