Storybook: Error with 5.1.0-beta and React < 16.6

[beauroberts]

Describe the bug
When using React < 16.6, storybook 5.1.0-beta fails to load in the browser with the following error in the dev console:

Uncaught TypeError: React.memo is not a function
    at Object../node_modules/react-inspector/dist/cjs/react-inspector.js (vendors~main.346d12fabfecf4be4f79.bundle.js:115806)
    at __webpack_require__ (runtime~main.346d12fabfecf4be4f79.bundle.js:782)
    at fn (runtime~main.346d12fabfecf4be4f79.bundle.js:150)
    at Object../node_modules/@storybook/theming/dist/convert.js (vendors~main.346d12fabfecf4be4f79.bundle.js:46334)
    at __webpack_require__ (runtime~main.346d12fabfecf4be4f79.bundle.js:782)
    at fn (runtime~main.346d12fabfecf4be4f79.bundle.js:150)
    at Object../node_modules/@storybook/theming/dist/index.js (vendors~main.346d12fabfecf4be4f79.bundle.js:46851)
    at __webpack_require__ (runtime~main.346d12fabfecf4be4f79.bundle.js:782)
    at fn (runtime~main.346d12fabfecf4be4f79.bundle.js:150)
    at Module../.storybook/theme.js (main.346d12fabfecf4be4f79.bundle.js:734)

I am upgrading from storybook 5.1.0-alpha.37

The React peerDependencies seem to suggest that any version is supported ("react": "*"), but it looks like usage of React.memo has recently made it into the codebase. Does this mean you no longer support React < 16.6? Apologies if this has been called out somewhere, but I couldn't find it in the migration guide or changelog.

[kaelig]

I encountered the same issue (workaround: downgrade to 5.1.0-alpha.39).

[shilman]

@beauroberts @kaelig What addons are you using? Can you try disabling all of them & let me know if it's still a problem? Thanks!

[kaelig]

Here are all the storybook-related packages we use:

    "@storybook/addon-a11y": "5.1.0-alpha.39",
    "@storybook/addon-actions": "5.1.0-alpha.39",
    "@storybook/addon-backgrounds": "5.1.0-alpha.39",
    "@storybook/addon-console": "^1.1.0",
    "@storybook/addon-notes": "5.1.0-alpha.39",
    "@storybook/addon-viewport": "5.1.0-alpha.39",
    "@storybook/react": "5.1.0-alpha.39",
    "@storybook/theming": "5.1.0-alpha.39",

Sadly, even when disabling all of the addons (running 5.1.0-beta.1), the issue still happens.

[shilman]

Thanks for checking that @kaelig. I'll dig in and see if I can figure out what's going on. 🙏

[ndelangen]

Do you have a project I can check out to reproduce this locally and debug?

[kaelig]

Yes, this is the project: https://github.com/Shopify/polaris-react/pull/1488

[beauroberts]

Thanks for looking into this, and apologies if this is old news:

From what I can tell, the source of the particular error I reported initially comes from the dependency on react-inspector, used in lib/theming/src/convert.ts and also in the Actions addon.

react-inspector uses React.memo and has a minimum React peerDependency of 16.8.4.

[ndelangen]

@beauroberts thanks for digging that up, maybe I can find a way of including the dark & light themes from react-inspector without depending on the entire package from lib/theming/src/convert.ts

[shilman]

Gadzooks!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-rc.0 containing PR #6818 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

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