storybook: Upgrading to React 17 on app level breaks UI

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 14
Comments: 41 (24 by maintainers)

Commits related to this issue

Temporarily add "--no-dll" to storybook commands to fix React@17 compat. See https://github.com/storybookjs/storybook/issues/12408 — committed to JetBrains/ring-ui by andrey-skl 4 years ago
chore: add --no-dll to start-storybook script to fix react compatibility issue https://github.com/storybookjs/storybook/issues/12408 — committed to liamrdawson/photography-v2.0 by liamrdawson 4 years ago
Upgrading everywhere to React 17 See https://github.com/storybookjs/storybook/issues/12408#issuecomment-716639680 for the temporary fix for React Storybook that kept pulling in React 16. — committed to Bullfrog-Labs/bullfrog by nybbles 4 years ago
Nybbles/bul 43 get auth working (#27) * Adding Firebase Emulator logs to .gitignore * Integrating in LoginView and logging-in behavior * Upgrading everywhere to React 17 See https://github.c... — committed to Bullfrog-Labs/bullfrog by nybbles 4 years ago

Most upvoted comments

Fixed in #12972 / 6.1-beta. Closing.

npx sb@next upgrade --prerelease

+15

shilman on Nov 4, 2020

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.

+10

bcomnes on Oct 31, 2020

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

+10

magic-akari on Oct 21, 2020

“yarn storybook --no-dll” works for me

chihshenghuang on Oct 24, 2020

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.

shilman on Oct 26, 2020

I was able to get this working on react 17 by turning off the new JSX transform.

In the tsconfig

-   "jsx": "react-jsx",
+   "jsx": "react",

And add import * as React from 'react'; in all JSX files as needed. After that, you can wipe the tears off your keyboard 🙍‍♂️

matthias-ccri on Mar 18, 2021

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

shilman on Oct 28, 2020

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

shilman on Oct 23, 2020

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

shilman on Nov 5, 2020

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

GrossDesignCo on Oct 21, 2020

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 on Oct 26, 2020

Thanks @shayc ! Will check it out later today

shilman on Oct 23, 2020

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

Hypnosphi on Sep 10, 2020

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

dburles on Oct 27, 2020

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

shilman on Oct 24, 2020

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

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

shayc on Oct 23, 2020

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 on Oct 23, 2020

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

shilman on Sep 15, 2020

@molebox not AFAIK. @Hypnosphi any ideas here?

shilman on Sep 15, 2020