react storybook v4.1.14 is broken in new/existing projects #6248

shlomitc · 2019-03-23T16:00:56Z

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:

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": {}
}

run npm run storybook
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)

The text was updated successfully, but these errors were encountered:

Armanio · 2019-03-23T17:25:15Z

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

shlomitc · 2019-03-23T17:40:44Z

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

Armanio · 2019-03-23T17:48:05Z

Use v5. Problem solved! 😃

shlomitc · 2019-03-23T18:08:42Z

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

shilman · 2019-03-23T22:44:23Z

@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 · 2019-03-23T23:13:18Z

@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 · 2019-03-24T00:02:44Z

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: storybook-eol/react-treebeard#155

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

shilman · 2019-03-24T07:44:41Z

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 · 2019-03-24T08:13:49Z

@shilman thanks for the super-quick response!

shlomitc · 2019-03-24T11:02:23Z

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 · 2019-03-24T12:59:43Z

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!

Suddenly having problem starting Storybook and need to bump the version to fix it according the following thread: storybookjs/storybook#6248

@Class

* Updated headshots * Proper handling of Redux state in localStorage * Remove truncation of barcode that caused the BIDs all look the same on dashboard's historical upload table * 💅 Increment y axis scale to be 1 or greater than the highest upload number (regardless of statues) on bar chart * 💬 Updated comment * Reset form values upon successful upload * No need for visual cues if form field is validated * Changed data type shortname * Updated import component name and removed unused component * 🐛 Bump Storybook version 4.1.x to its latest Suddenly having problem starting Storybook and need to bump the version to fix it according the following thread: storybookjs/storybook#6248 * 💅 Modified particle.js animation config settings * 💅 Added background color to make text more readable against blue background color * Added 'profile' prop to both Sidebar and Footer components * Added 'profile' state * Added 'profile' prop to Sidebar component * Added 'profile' prop to Sidebar component * Directly import JSON data for d3 to use instead of importing .csv files to be converted to JSON using d3 * No longer using .csv files for d3 * Refactor code with 'if' statement wrapper that works for Storybook as well * Added 'profile' prop to Sidebar and Footer components; added stories for animal sub analysis and phenotype data analysis * 🎉 Initial commit for animal phenotype data visualization story * Added 'profile' prop * 🐛 Fixed console errors caused by missing properties in test data * Added <React.Fragment> wrapper to fix issue in which footer is not aligned at bottom * 🎉 Initial commit for error page story * Updated test assertions due to the addition of animal phenotype data visualization component * 🎉 Initial commit for unit test of animal phenotype data plot component * 💅 Re-enabled the visual cue for form field validation on blur event * Added handling to clear upload form values and recently upload file list if user navigates away from and returns to the upload screen * Revert previous implementation of setting 'formValues' to default on 'types.SET_ALL_SUCCESS' Also added/edited various comments and formatting * Added mock 'clearForm' action * Added action for upload button * Added 'previousUploads' prop * 🎉 Initial commit for helper function to sort timestamp in numeric format * Added 'recentUploadList' module * 💅 Styling changes to upload file list UI * 🎉 Initial commit for recent file upload activity UI styling * Added 'previousUploads' prop to be passed down to 'UploadList' child component * Added 'previousUploads' prop to be passed down to 'RecentUploadList' child component Also updated the UI for the upload file list and appended the recent upload activity list to it. * 🎉 Initial commit for component rendering recent upload activity * 🎉 Initial commit for recent upload activity story * Fixed test assertion due to UI changes * Added @Class to DOM element and reformatted code * 🎉 Initial commit for recent upload activity unit test * Initial commit for sample JSON data files used by d3 * Added mock data * Added 'react-ga' module dependency * Initialize Google Analytics * Implemented Google Analytics with React Router via HOC * Mocking 'react-ga' in jest * 🎉 Initial commit for Google Analytics implementation * 🐛 Allow flexibility matching the hostname * Added action to reset depth on Analysis page * Allow clicking on the Animal/Human analysis nav links on the sidebar to reset the main analysis UIs * Added mock 'resetDepth' function * Added 'resetDepth' action * Added sidebar actions for the <Sidebar> component * Revert the addition of 'previousUploads' prop * Enable raw data and pre-processed data checkboxes in upload edit mode; add 'editUpload' to upload's default state * Revert the implementation of showing 'all' previous uploads at all times Also changed the UIs of the upload file list table to accommodate the need to show both new uploads and previous uploads. * Revert the addition of 'previousUploads' prop * Update story due to UI changes * Update test upload data for the addition of 'Previously Uploaded' user story * Add story for 'Previously Uploaded' UI * Revert the addition of 'editUpload' state; add 'addition' property to the 'upload' object to resolve duplicate files when user adds a new file to existing upload transaction. * Increase timeout to allow the cancel upload modal to be dismissed

shilman added react high priority bug has workaround labels Mar 23, 2019

shilman added this to the 5.0.x milestone Mar 24, 2019

shilman mentioned this issue Mar 24, 2019

Workaround broken treebeard animations #6249

Merged

shilman closed this as completed Mar 24, 2019

jimmyzhen added a commit to MoTrPAC/motrpac-frontend that referenced this issue Apr 18, 2019

🐛 Bump Storybook version 4.1.x to its latest

6b3cc56

Suddenly having problem starting Storybook and need to bump the version to fix it according the following thread: storybookjs/storybook#6248

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react storybook v4.1.14 is broken in new/existing projects #6248

react storybook v4.1.14 is broken in new/existing projects #6248

shlomitc commented Mar 23, 2019

Armanio commented Mar 23, 2019

shlomitc commented Mar 23, 2019 •

edited

Loading

Armanio commented Mar 23, 2019

shlomitc commented Mar 23, 2019

shilman commented Mar 23, 2019 •

edited

Loading

shilman commented Mar 23, 2019 •

edited

Loading

shilman commented Mar 24, 2019 •

edited

Loading

shilman commented Mar 24, 2019

shlomitc commented Mar 24, 2019

shlomitc commented Mar 24, 2019

shilman commented Mar 24, 2019 •

edited

Loading

react storybook v4.1.14 is broken in new/existing projects #6248

react storybook v4.1.14 is broken in new/existing projects #6248

Comments

shlomitc commented Mar 23, 2019

Armanio commented Mar 23, 2019

shlomitc commented Mar 23, 2019 • edited Loading

Armanio commented Mar 23, 2019

shlomitc commented Mar 23, 2019

shilman commented Mar 23, 2019 • edited Loading

shilman commented Mar 23, 2019 • edited Loading

shilman commented Mar 24, 2019 • edited Loading

shilman commented Mar 24, 2019

shlomitc commented Mar 24, 2019

shlomitc commented Mar 24, 2019

shilman commented Mar 24, 2019 • edited Loading

shlomitc commented Mar 23, 2019 •

edited

Loading

shilman commented Mar 23, 2019 •

edited

Loading

shilman commented Mar 23, 2019 •

edited

Loading

shilman commented Mar 24, 2019 •

edited

Loading

shilman commented Mar 24, 2019 •

edited

Loading