Storybook fails for Angular 9

[victoriaunizhona]

Describe the bug
Storybook fails on start after running npm run docs:json && start-storybook -p 6006
I found the fix to install react and react dom, but why do I need to do this as it is IONIC + Angular.

To Reproduce
Steps to reproduce the behavior:

1. Run npm run docs:json && start-storybook -p 6006
2. Go to http://localhost:6006/
3. Open console
4. See error in console and blank page

Expected behavior
It opens with no errors and shows storybook

Screenshots

Code snippets

ERR! Runtime error! Check your browser console.
ERR! TypeError: Object(...) is not a function
ERR!     at Module../node_modules/@emotion/core/dist/emotion-element-57a3a7a3.browser.esm.js (http://localhost:6006/vendors~main.4bad8eb2c72bab395e1f.bundle.js:1004:99)
ERR!     at __webpack_require__ (http://localhost:6006/runtime~main.99691078705b39185f99.bundle.js:80:30)
ERR!     at Module../node_modules/@emotion/core/dist/core.browser.esm.js (http://localhost:6006/vendors~main.4bad8eb2c72bab395e1f.bundle.js:710:98)
ERR!     at __webpack_require__ (http://localhost:6006/runtime~main.99691078705b39185f99.bundle.js:80:30)
ERR!     at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (http://localhost:6006/vendors~main.4bad8eb2c72bab395e1f.bundle.js:1782:71)
ERR!     at __webpack_require__ (http://localhost:6006/runtime~main.99691078705b39185f99.bundle.js:80:30)
ERR!     at Module../node_modules/@emotion/styled/dist/styled.browser.esm.js (http://localhost:6006/vendors~main.4bad8eb2c72bab395e1f.bundle.js:1962:78)
ERR!     at __webpack_require__ (http://localhost:6006/runtime~main.99691078705b39185f99.bundle.js:80:30)
ERR!     at Object../node_modules/@storybook/theming/dist/index.js (http://localhost:6006/vendors~main.4bad8eb2c72bab395e1f.bundle.js:48737:39)
ERR!     at __webpack_require__ (http://localhost:6006/runtime~main.99691078705b39185f99.bundle.js:80:30)

System

OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz

Binaries:
Node: 12.4.0
npm: 6.14.6
Browsers:
Chrome: 86.0.4240.198
Edge: Spartan (44.18362.449.0)
npmPackages:
@storybook/addon-a11y: ^6.1.11 => 6.1.11
@storybook/addon-actions: ^6.1.10 => 6.1.11
@storybook/addon-essentials: ^6.1.10 => 6.1.11
@storybook/addon-links: ^6.1.10 => 6.1.11
@storybook/addon-notes: ^5.3.21 => 5.3.21
@storybook/addon-storysource: ^6.1.11 => 6.1.11
@storybook/angular: ^6.1.10 => 6.1.11
npmGlobalPackages:
@storybook/cli: 6.1.10

[shilman]

Storybook's UI uses react and react-dom. @storybook/angular depends on them directly, so you shouldn't have to install them yourself.

https://github.com/storybookjs/storybook/blob/master/app/angular/package.json#L47-L48

Maybe it's some kind of monorepo-related issue?

[victoriaunizhona]

Storybook's UI uses react and react-dom. @storybook/angular depends on them directly, so you shouldn't have to install them yourself.

https://github.com/storybookjs/storybook/blob/master/app/angular/package.json#L47-L48

Maybe it's some kind of monorepo-related issue?

@shilman This kind of issue was previously reported before #8284

and even has a note here - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-163

I know that it is older - but shows that this was not an issue caused by some specific project. I suppose it is because @emotion may require higher version of react or something related with that specific dependency.

What kind of monorepo issue it could be so that it is fixed after adding react?

[nathanosdev]

I ran into a similar issue and it was because another package in my project was installing an older version of React.

[victoriaunizhona]

@AnimaMundi how you resolved this? Other packages could have other dependencies, but it should not affect this one as it has its own version of react as dependency specified.

[nathanosdev]

Fortunately for my case, the other packages that were depending on React were also compatible with React v16. I agree that Storybook should be shipping with it's own version of React, particularly for Angular projects where devs will have less knowledge of React and it's ecosystem.

[shilman]

@storybook/angular has a direct dependency on react

[nickbullock]

I have swagger-ui@3.28.0 that ships with react@15 and it breaks storybook for me (with the same emotion-element problem). What?

For angular developers: adding

    "react": "^16.14.0",
    "react-dom": "^16.14.0"

to package.json is a workaround for this issue.

[victoriaunizhona]

I have swagger-ui@3.28.0 that ships with react@15 and it breaks storybook for me (with the same emotion-element problem). What?

For angular developers: adding

    "react": "^16.14.0",
    "react-dom": "^16.14.0"

to package.json is a workaround for this issue.

Yep, this works as I mentioned in description. But it seems redundant and increases bundle size.
Would be great to have it fixed.

[nickbullock]

@victoriaunizhona missed that, thanks. totally agree!

[shilman]

@victoriaunizhona does it help if you remove this dependency

@storybook/addon-notes: ^5.3.21 => 5.3.21