⛔️ React 15.x Storybook upgrade => 5.2.x fails

[frankstallone]

Describe the bug
Storybook 5.2.x no longer works with React 15.x. Seems to be an issue with Emotion

To Reproduce
Upgrading a working React 15.x Storybook, on version 5.1.x to 5.2.x

• npx npm-check-updates '/storybook/' -u && npm i

@storybook/addon-actions       ~5.1.9  →  ~5.2.1 
@storybook/addon-knobs         ~5.1.9  →  ~5.2.1 
@storybook/addon-storysource   ~5.1.9  →  ~5.2.1 
@storybook/react               ~5.1.9  →  ~5.2.1 
@types/storybook__addon-knobs  ^5.0.3  →  ^5.0.4

• npm start to get storybook running it fails to load and errors out in console.

Expected behavior
Magic 🧙🏻‍♀️

Screenshots

Code snippets
Error:

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (vendors~main.3035f772f582889b1a6b.bundle.js:581)
    at __webpack_require__ (runtime~main.3035f772f582889b1a6b.bundle.js:786)
    at fn (runtime~main.3035f772f582889b1a6b.bundle.js:151)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (vendors~main.3035f772f582889b1a6b.bundle.js:1551)
    at __webpack_require__ (runtime~main.3035f772f582889b1a6b.bundle.js:786)
    at fn (runtime~main.3035f772f582889b1a6b.bundle.js:151)
    at Module../node_modules/@emotion/styled/dist/styled.browser.esm.js (vendors~main.3035f772f582889b1a6b.bundle.js:1728)
    at __webpack_require__ (runtime~main.3035f772f582889b1a6b.bundle.js:786)
    at fn (runtime~main.3035f772f582889b1a6b.bundle.js:151)
    at Object../node_modules/@storybook/theming/dist/index.js (vendors~main.3035f772f582889b1a6b.bundle.js:11348)

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 8.15.1 - ~/.nvm/versions/node/v8.15.1/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.15.1/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Safari: 13.0.1

I also use Firefox/Firefox nightly and Canary.

[JabbyPanda]

#6474

Had Storybook 5.x ever been pronounced to be compatible with React 15 ?

[shilman]

@JabbyPanda Yes, at some point 5.x has been verified compatible. We'll fix it and be sure to do a better job keeping it unbroken.

[ndelangen]

Confirmed:
https://storybookjs-next.now.sh/cra-react15/?path=/story/*

[ndelangen]

@shilman it's a docs-mode change that broke it:
https://github.com/storybookjs/storybook/blob/next/lib/core/src/client/preview/NoDocs.js#L2

This code run in the preview and uses emotion, this therefore requires react 16.x

[frankstallone]

I appreciate you guys working on this. We attempted to update our app to React 16 within the last 12 months but ran into some bottlenecks. We'll get to it eventually but for now it's not mission critical like other issues we're working on. I was looking this morning to see if I could quickly do a create-react-app with React 15 but didn't see any flag for version so I could get an example up on Netlify or something. @ndelangen https://storybookjs-next.now.sh/ is great.

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.21 containing PR #8454 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.5 containing PR #8454 that references this issue. Upgrade today to try it out!

[frankstallone]

I can confirm Storybook 5.2.5 is working properly with React 15! 🍾

 @storybook/addon-actions      ~5.1.9  →  ~5.2.5 
 @storybook/addon-knobs        ~5.1.9  →  ~5.2.5 
 @storybook/addon-storysource  ~5.1.9  →  ~5.2.5 
 @storybook/react              ~5.1.9  →  ~5.2.5 

[ndelangen]

Thank you for the feedback @frankstallone, it's very valuable.

[brendonco]

doesnt seem to work. emotion with core v10.0.22 still having issue

@storybook/addon-actions      ~5.1.9  →  ~5.2.5 
 @storybook/addon-knobs        ~5.1.9  →  ~5.2.5 
 @storybook/addon-storysource  ~5.1.9  →  ~5.2.5 
 @storybook/react              ~5.1.9  →  ~5.2.5 

core.browser.esm.js:10 Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:10)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../node_modules/@emotion/styled/dist/styled.browser.esm.js (styled.browser.esm.js:1)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/theming/dist/index.js (index.js:33)
./node_modules/@emotion/core/dist/core.browser.esm.js @ core.browser.esm.js:10
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js @ styled-base.browser.esm.js:1
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./node_modules/@emotion/styled/dist/styled.browser.esm.js @ styled.browser.esm.js:1
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./node_modules/@storybook/theming/dist/index.js @ index.js:33
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
(anonymous) @ config.js:7
./.storybook/config.js @ config.js:39
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
0 @ worldPopulation.js:1079
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.52aa3e66acdc52622e70.bundle.js:1

[shilman]

cc @ndelangen

[ndelangen]

emotion v10 requires React 16.5, this we can't fix for you.