4.0.0-alpha.11 crashes storybook

[argshook]

Bug or support request summary

Hello!
version 4.0.0-alpha.11 is crashing storybook

Steps to reproduce

package.json:

    "devDependencies": {
        "@storybook/addon-options": "4.0.0-alpha.11",
        "@storybook/react": "4.0.0-alpha.11"
    }

start-storybook

Expected

storybook works as usual

Actual

storybook crashes before rendering any UI

fuse.js:9 Uncaught TypeError: Cannot read property 'overlayClass' of null
    at t.value (fuse.js:9)
        at p._renderValidatedComponentWithoutOwnerOrContext
        (react-dom.min.js:13)
        at p._renderValidatedComponent (react-dom.min.js:13)
        at performInitialMount (react-dom.min.js:13)
        at p.mountComponent (react-dom.min.js:13)
        at Object.mountComponent (react-dom.min.js:14)
        at performInitialMount (react-dom.min.js:13)
        at p.mountComponent (react-dom.min.js:13)
        at Object.mountComponent (react-dom.min.js:14)
        at performInitialMount (react-dom.min.js:13)

---

we noticed this without any code changes on our side.
We had ^4.0.0-alpha.9 in package.json which now resolves to 4.0.0-alpha.11.

Please let me know if i should provide more specific details

Thanks!

[paxarpp]

Good afternoon, here is my error when starting (also update 9 for 11)

PS D:\KODING\ui_library> npm run storybook

[email protected] storybook D:\KODING\ui_library
start-storybook -p 9001 -c .storybook

module.js:557
throw err;
^

Error: Cannot find module 'core-js/modules/es6.array.for-each'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object. (D:\KODING\ui_library\node_modules\universal-dotenv\lib\index.cjs.js:11:1)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)

[ndelangen]

I will try to look at it asap

[shilman]

Temporary workaround: when I upgraded react in my CRA app from 16.0.0 to 16.4.1, then Storybook renders properly.

More comments @ndelangen :

official-storybook has the same problems, but somehow the UI still renders properly. I updated a CRA app's config.js to look like official-storybook's, but it still doesn't render properly:

import React from 'react';
import { ThemeProvider } from 'emotion-theming';
import { configure, addDecorator } from '@storybook/react';
import { themes } from '@storybook/components';
import { setOptions } from '@storybook/addon-options';

setOptions({ theme: themes.dark });
addDecorator(story => <ThemeProvider theme={themes.normal}>{story()}</ThemeProvider>);

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

When I hack shortcuts_help.js in the following way, the official-storybook error goes away:

  render() {
    const { isOpen, onClose, platform } = this.props;
    const { overlayClass, modalClass } = this.state || {};

shortcuts_help also has the following warning:

warning.js:33 Warning: ShortcutsHelp: Did not properly initialize state during construction. Expected state to be an object, but it was undefined.

I tried to hack this in various ways (setting state in constructor, or statically) and it didn't fix the warning.

I don't understand enough about getDerivedStateFromProps, but we use it all over in the theming code and it seems to be causing problems.

[shilman]

This has been fixed and released in 4.0.0-alpha.12

https://github.com/storybooks/storybook/releases/tag/v4.0.0-alpha.12