Storybook: Storybook does not work with React17

Created on 2 Nov 2020 · 3Comments · Source: storybookjs/storybook

Describe the bug

I have upgraded React to v17 and, although the app itself works, storybook now breaks.

To Reproduce

Upgrade react and associated dependencies to version 17.0.1 and try running storybook. It breaks.

Expected behaviour

Storybook to work. Instead I get these errors

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 (webpack://storybook_ui_dll//Users/shilman/projects/baseline/storybook/node_modules/react/cjs/react.development.js?:1431)
    at Object.useContext (webpack://storybook_ui_dll//Users/shilman/projects/baseline/storybook/node_modules/react/cjs/react.development.js?:1439)
    at useTheme (webpack://storybook_ui_dll//Users/shilman/projects/baseline/storybook/node_modules/emotion-theming/dist/emotion-theming.browser.esm.js?:112)
    at useMenu (vendors~main.07a24711479887519527.bundle.js:37448)
    at Object.mapper [as current] (vendors~main.07a24711479887519527.bundle.js:37881)
    at ManagerConsumer (vendors~main.07a24711479887519527.bundle.js:5157)
    at renderWithHooks (vendors~main.07a24711479887519527.bundle.js:58070)
    at mountIndeterminateComponent (vendors~main.07a24711479887519527.bundle.js:60749)
    at beginWork (vendors~main.07a24711479887519527.bundle.js:61863)
    at HTMLUnknownElement.callCallback (vendors~main.07a24711479887519527.bundle.js:43455)

and

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
    in SizeMeReferenceWrapper
    in SizeMeRenderer(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

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 51.0.1
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.28 => 6.0.28 
    @storybook/addon-essentials: ^6.0.28 => 6.0.28 
    @storybook/addon-links: ^6.0.28 => 6.0.28 
    @storybook/node-logger: ^6.0.28 => 6.0.28 
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.28 => 6.0.28

Additional context

Running npm ls react shows a lot of storybook add ons expect React 16.

[email protected] /Users/davesag/src/my-project
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── UNMET PEER DEPENDENCY [email protected] 
│ ├─┬ @storybook/[email protected]
│ │ └── UNMET PEER DEPENDENCY [email protected] 
│ └── UNMET PEER DEPENDENCY [email protected] 
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └── [email protected] 
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └─┬ @storybook/[email protected]
│     └── UNMET PEER DEPENDENCY [email protected] 
└── UNMET PEER DEPENDENCY [email protected] 

npm ERR! peer dep missing: react@^16.8.0, required by @material-ui/[email protected]
npm ERR! peer dep missing: react@^16.8.0, required by @material-ui/[email protected]
npm ERR! peer dep missing: react@^16.8.0, required by @storybook/[email protected]
npm ERR! peer dep missing: react@^16.4.0, required by [email protected]
npm ERR! peer dep missing: react@^16.8.5, required by [email protected]
npm ERR! peer dep missing: react@^16.8.4, required by [email protected]
npm ERR! peer dep missing: [email protected] || 16.x || 16.4.0-alpha.0911da3, required by @reach/[email protected]
npm ERR! peer dep missing: react@^16.6.0, required by [email protected]
npm ERR! peer dep missing: react@^16.8.0, required by [email protected]
npm ERR! peer dep missing: react@^16.6.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0-0 || ^16.0.0, required by [email protected]