[v5.0.0-beta.2] Old version of React is not happy with Storybook with React 16.8.1

Describe the bug Storybook is totally crashed and printed out many theme related errors. Even though I removed all add-ons and stories, the problem persisted. The bug can be resolved by upgrade everything to React 16.8.1 or rollback storybook to v5.0.0.beta.1.

To Reproduce Steps to reproduce the behavior:

1. Have a project running on React 16.7 or lower
2. Launch Storybook v5.0.0.beta.2

Expected behavior No expected crush.

Screenshots Some error was printed.

Warning: Failed prop type: The prop `viewMode` is marked as required in `<<anonymous>>`, but its value is `undefined`.
Uncaught TypeError: Cannot read property 'secondary' of undefined
Warning: Failed prop type: Invalid prop `notifications[0].id` of type `string` supplied to `NotificationList`, expected `number`.
Uncaught TypeError: Cannot read property 'size' of undefined
Uncaught TypeError: Cannot read property 'positive' of undefined
Uncaught TypeError: Cannot read property 'dark' of undefined
Uncaught TypeError: Cannot read property 'size' of undefined
Uncaught TypeError: Cannot read property 'preview' of undefined
The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to "first-of-type"
Uncaught TypeError: Cannot read property 'secondary' of undefined
Uncaught TypeError: Cannot read property 'secondary' of undefined
Uncaught TypeError: Cannot read property 'size' of undefined
The above error occurred in the <Context.Consumer> component:
Uncaught TypeError: Cannot read property 'secondary' of undefined
The above error occurred in the <LocationProvider> component:
Uncaught TypeError: Cannot read property 'secondary' of undefined

System:

• OS: MacOS Mojave
• Device: MacBook Air 2013-mid
• Browser: Chrome 72
• Framework: React 16.3, React 16.7
• Version: v5.0.0-beta.2

Additional context Still have errors even though I upgraded my React to the latest. Here is the error stacks

vendors~main.cbfe59591d8b3f61e698.bundle.js:74002 Warning: Failed prop type: The prop `viewMode` is marked as required in `<<anonymous>>`, but its value is `undefined`.
    in Unknown (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
printWarning @ vendors~main.cbfe59591d8b3f61e698.bundle.js:74002
vendors~main.cbfe59591d8b3f61e698.bundle.js:74002 Warning: Failed prop type: Invalid prop `notifications[0].id` of type `string` supplied to `NotificationList`, expected `number`.
    in NotificationList (created by Sidebar)
    in Sidebar (created by Context.Consumer)
    in _default (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Nav)
    in Nav (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown (created by Manager)
    in ThemeProvider (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
printWarning @ vendors~main.cbfe59591d8b3f61e698.bundle.js:74002
vendors~main.cbfe59591d8b3f61e698.bundle.js:82914 Warning: Unknown event handler property `onVisibilityChange`. It will be ignored.
    in div (created by Context.Consumer)
    in Styled(div) (created by InnerReference)
    in InnerReference (created by Context.Consumer)
    in Reference (created by TooltipTrigger)
    in Manager (created by TooltipTrigger)
    in TooltipTrigger (created by WithTooltip)
    in WithTooltip
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown (created by withState(Component))
    in withState(Component) (created by Context.Consumer)
    in Styled(withState(Component)) (created by Sidebar)
    in nav (created by Context.Consumer)
    in Styled(nav) (created by Sidebar)
    in Sidebar (created by Context.Consumer)
    in _default (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Nav)
    in Nav (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown (created by Manager)
    in ThemeProvider (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
warningWithoutStack @ vendors~main.cbfe59591d8b3f61e698.bundle.js:82914
2vendors~main.cbfe59591d8b3f61e698.bundle.js:444 The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to "first-of-type"
(anonymous) @ vendors~main.cbfe59591d8b3f61e698.bundle.js:444
client.js:92

[shilman]

FYI, I have reproduced this error on a boilerplate CRA1 project that I manually upgraded. It does not repro on a CRA2 project.

EDIT: the issue I found is a different issue. Got confused since @leoyli also reported the theming issue in Discord.

Uncaught TypeError: Cannot read property 'secondary' of undefined
    at push.../node_modules/@storybook/ui/dist/components/layout/draggers.js.exports.Handle (vendors~main.f3d593564b4f73e25275.bundle.js:29071)
    at handleInterpolation (vendors~main.f3d593564b4f73e25275.bundle.js:1397)
    at serializeStyles (vendors~main.f3d593564b4f73e25275.bundle.js:1482)
    at vendors~main.f3d593564b4f73e25275.bundle.js:1929
    at updateContextConsumer (vendors~main.f3d593564b4f73e25275.bundle.js:53319)
    at beginWork (vendors~main.f3d593564b4f73e25275.bundle.js:53497)
    at performUnitOfWork (vendors~main.f3d593564b4f73e25275.bundle.js:57036)
    at workLoop (vendors~main.f3d593564b4f73e25275.bundle.js:57076)
    at HTMLUnknownElement.callCallback (vendors~main.f3d593564b4f73e25275.bundle.js:38396)
    at Object.invokeGuardedCallbackDev (vendors~main.f3d593564b4f73e25275.bundle.js:38446)

@domyen @ndelangen The theming is still half-baked. The themes define colorSecondary but the components still reference color.secondary. I’m assuming you guys have a plan for this–please let me know when things are consistent and I’ll release a fix.

EDIT2: i’m also seeing the required viewMode thing so I guess I did partially repro this. Sorry for all the spazzing here – I think I need a nap, or more coffee, or both.

[leoyli]

Yes, I think then this issue should be closed…! Thank you!