Storybook: react storybook v4.1.14 is broken in new/existing projects

[shlomitc]

Describe the bug
Starting from yesterady afternoon, a new installation and load of storybook@4 throws the following errors in the console while a blank page is loaded.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `VelocityTransitionGroup`.
    at invariant (http://localhost:6006/vendors~main.b14a04be792fa5cc9832.bundle.js:14296:15)
    at createFiberFromTypeAndProps (http://localhost:6006/vendors~main.b14a04be792fa5cc9832.bundle.js:24444:11)
    at createFiberFromElement (http://localhost:6006/vendors~main.b14a04be792fa5cc9832.bundle.js:24465:15)
    at reconcileSingleElement (http://localhost:6006/vendors~main.b14a04be792fa5cc9832.bundle.js:26737:23)
    at reconcileChildFibers (http://localhost:6006/vendors~main.b14a04be792fa5cc9832.bundle.js:26794:35)
    at reconcileChildren (http://localhost:6006/vendors~main.b14a04be792fa5cc9832.bundle.js:28608:28)
    at finishClassComponent (http://localhost:6006/vendors~main.b14a04be792fa5cc9832.bundle.js:28964:5)
    at updateClassComponent (http://localhost:6006/vendors~main.b14a04be792fa5cc9832.bundle.js:28902:24)
    at beginWork (http://localhost:6006/vendors~main.b14a04be792fa5cc9832.bundle.js:29850:16)
    at performUnitOfWork (http://localhost:6006/vendors~main.b14a04be792fa5cc9832.bundle.js:33518:12)
vendors~main.b14a04be792fa5cc9832.bundle.js:31323 The above error occurred in the <VelocityTransitionGroup> component:
    in VelocityTransitionGroup (created by TreeNode)
    in li (created by Context.Consumer)
    in Styled(li) (created by ForwardRef)
    in ForwardRef (created by TreeNode)
    in TreeNode (created by TreeBeard)
    in ul (created by Context.Consumer)
    in Styled(ul) (created by ForwardRef)
    in ForwardRef (created by TreeBeard)
    in TreeBeard (created by Stories)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Stories)
    in Stories (created by StoriesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by StoriesPanel)
    in StoriesPanel (created by Container(StoriesPanel))
    in Container(StoriesPanel) (created by storiesPanel)
    in storiesPanel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Layout)
    in div
    in Pane
    in div
    in SplitPane (created by Layout)
    in Layout (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Layout)
    in div (created by Layout)
    in Unknown (created by Layout)
    in Layout (created by Container(Layout))
    in Container(Layout)
    in div

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

terminal doesn't show any warning besides issues related to core-js

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

To Reproduce
Steps to reproduce the behavior:

1. use the following package.json with a default storybook configuration (same as created in the cli tool):

{
  "name": "sb-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@storybook/react": "^4.0.0",
    "@storybook/addon-actions": "^4.0.0",
    "@storybook/addon-links": "^4.0.0",
    "@storybook/addons": "^4.0.0",
    "@babel/core": "^7.4.0",
    "babel-loader": "^8.0.5"
  },
  "dependencies": {}
}

1. run npm run storybook
2. open the browser

Expected behavior
To work of course.

Screenshots
just a blank page with the above console error.

Code snippets

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: chrome
• Framework: react
• Addons: none
• Version: latest v4

Additional context
I tried digging in but done have a concrete issue, however, I noticed the following:
@storybook/ui have react@16 dependency since 4.1.5.

When I tried installing strictly v4.1.4.
With react@16 - same error as above.
with react@15 - the following error

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (vendors~main.d79783227d31b33e2c80.bundle.js:305)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/addon-actions/dist/components/ActionLogger/index.js (vendors~main.d79783227d31b33e2c80.bundle.js:2000)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/addon-actions/dist/containers/ActionLogger/index.js (vendors~main.d79783227d31b33e2c80.bundle.js:2208)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/addon-actions/dist/manager.js (vendors~main.d79783227d31b33e2c80.bundle.js:4007)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/addon-actions/register.js (vendors~main.d79783227d31b33e2c80.bundle.js:4547)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)

[Armanio]

And if you use sb@v5, problem still remains?

[shlomitc]

No, a newly generated project with the cli and newest storybook works just fine

[Armanio]

Use v5. Problem solved! :smiley:

[shlomitc]

Still using react 15 in the project. Migration is planned but it’s not an easy change in our library

[shilman]

@shlomitc thanks for raising this, we'll def fix for everybody who's stuck on v4! I'm able to repro and will look at it today. Marked as high priority.

Separately, I want to clarify that v5 should be react 15 compatible since it sounds like that's what's preventing you from upgrading. And if it doesn't that's a bug and we'll do our best to fix it.

[shilman]

@shlomitc I'm able to repro this. Almost certain that this is related to something changing in the underlying dependencies and us using ^xxx version specifiers. However, the error that I'm getting is different:

vendors~main.5b4928393a04d1a67138.bundle.js:82879 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `VelocityTransitionGroup`.
    in VelocityTransitionGroup (created by TreeNode)
    ...

What I did:

• tried in a CRA2 project => REPRO
• tried in SB4 repo's official-storybook => NO REPRO
• tried in a Gatsby2 project => REPRO
• removed SB4 repo yarn.lock and tried in official-storybook => REPRO

Pretty sure that core-js warning is the problem, or possibly the symptom of another underlying problem. Reading through this now: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md

NOTES:

• tried SB5 in a CRA2 project => NO REPRO, but same core-js 2/3 warning

[shilman]

UPDATE: False alarm about Babel / core-js. This error is related to react-treebeard, which is the library we use in 4.x, and which we no longer use in 5.x.

Pretty sure it's due to this issue: https://github.com/storybooks/react-treebeard/issues/155

The error goes away in official-storybook when I remove react-treebeard from the UI:

[shilman]

Whoopee!! I just released https://github.com/storybooks/storybook/releases/tag/v4.1.16 containing PR #6249 that references this issue. Upgrade today to try it out!

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

[shlomitc]

@shilman thanks for the super-quick response!

[shlomitc]

Had to change the following configuration to false in order to make it work

doesn't work:

setOptions({
  sidebarAnimations: true
});

works:

setOptions({
  sidebarAnimations: false
});

[shilman]

Zoinks!! I just released https://github.com/storybooks/storybook/releases/tag/v3.4.12
containing PR #6249 that references this issue. Upgrade today to try it out!