Uncaught TypeError: Cannot read property 'length' of undefined at serializeStyles

[petekp]

Describe the bug
After following the migration docs from v4 to v5, the following error prevents Storybook from rendering:

Uncaught TypeError: Cannot read property 'length' of undefined
    at serializeStyles (vendors~main.204f682345711db63402.bundle.js:1571)
    at css (vendors~main.204f682345711db63402.bundle.js:1338)
    at Module.keyframes (vendors~main.204f682345711db63402.bundle.js:1199)
    at Object.../../node_modules/@storybook/theming/dist/animation.js (vendors~main.204f682345711db63402.bundle.js:24234)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object.../../node_modules/@storybook/theming/dist/create.js (vendors~main.204f682345711db63402.bundle.js:24392)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object.../../node_modules/@storybook/theming/dist/index.js (vendors~main.204f682345711db63402.bundle.js:24673)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object.../../node_modules/@storybook/addon-knobs/dist/components/Panel.js (vendors~main.204f682345711db63402.bundle.js:3502)

After seeing this same error on the docz repo, I suspect it's due to conflicting versions of emotion that storybook and docz are using, both of which are in separate packages but are hoisted into a shared set of dependencies via yarn workspaces.

Unfortunately this is a private codebase so i'm unable to provide a link to our setup. I can share these details:

• Using yarn workspaces (yarn v1.13.0)
• Node v11.40 / npm 6.4.1
• Project dependencies:

"dependencies": {
    "@babel/core": "7.3.4",
    "@babel/preset-react": "7.0.0",
    "@storybook/addon-a11y": "5.0.0",
    "@storybook/addon-knobs": "5.0.0",
    "@storybook/addon-links": "5.0.0",
    "@storybook/addon-notes": "5.0.0",
    "@storybook/react": "5.0.0",
    "color": "3.1.0",
    "react": "16.6.3",
    "react-art": "16.6.3",
    "react-dom": "16.6.3",
    "react-native": "0.57.8",
    "react-native-svg": "9.2.4",
    "react-native-web": "0.10.0",
    "storybook-addon-jsx": "6.0.0",
    "svgs": "4.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.3.4",
    "@babel/preset-react": "7.0.0",
    "@storybook/cli": "5.0.0",
    "@types/color": "3.0.0",
    "@types/node": "10.12.27",
    "@types/react": "16.4.14",
    "@types/react-dom": "16.0.11",
    "@types/react-native": "0.57.18",
    "@types/storybook-addon-jsx": "5.4.2",
    "@types/storybook__addon-a11y": "3.3.1",
    "@types/storybook__addon-info": "4.1.0",
    "@types/storybook__addon-knobs": "4.0.1",
    "@types/storybook__addon-links": "3.3.4",
    "@types/storybook__addon-notes": "4.0.2",
    "@types/storybook__react": "4.0.1",
    "awesome-typescript-loader": "5.2.1",
    "babel-loader": "8.0.5",
    "babel-plugin-module-resolver": "3.2.0",
    "storybook-addon-jsx": "6.0.0"
  }

System:

• OS: MacOS Mojave 10.14
• Device: Macbook Pro 2018
• Browser: Chrome
• Framework: React
• Addons: addon-a11y, addon-knobs, addon-links, addon-notes, react
• Version: 5.0.0

[petekp]

Confirmed that this is a conflict between docz and storybook's versions of emotion. After removing docz as a dependency, Storybook starts up fine.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[petekp]

Not sure this is an issue anymore. Closing!