Storybook: Error after upgrading React to version 17

[dfvalero]

Describe the bug
The app is not loading when I run start-storybook

To Reproduce

1. Run yarn add react react-dom react-is
2. Run start-storybook -p 6006
3. Go to http://localhost:6006/
4. Open chrome dev tools
5. See errors in the console

Expected behavior
App runs and shows the documentation

Screenshots

System

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
  Binaries:
    Node: 12.18.4 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 81.0.2
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.26 => 6.0.26 
    @storybook/addon-essentials: ^6.0.26 => 6.0.26 
    @storybook/addon-links: ^6.0.26 => 6.0.26 
    @storybook/addons: ^6.0.26 => 6.0.26 
    @storybook/react: ^6.0.26 => 6.0.26 
    @storybook/theming: ^6.0.26 => 6.0.26 

[shobhitsharma]

I have the same issue. This has to do with mismatching versions for react from same package. webpack's externals can help resolving it but not a decent solution to the problem. Needs a fix within storybook.

react_devtools_backend.js:2273 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

[mohsenkhanpour]

Workaround:

First add this to your package.json and run yarn

"resolutions": {
"react": "17.0.0",
"react-dom": "17.0.0"
}

Then run Storybook with --no-dll flag. For example: start-storybook --no-dll

[shilman]

Closing as dupe to #12408