Cannot read property 'length' of undefined at serializeStyles

Bug Report

Describe the bug

docz dev results in a “successful” build, but in browser the page is blank and the below error is logged to the console.

To Reproduce

A clean Docz install doesn’t appear to have this problem, so there must be some interaction with our dependencies causing this (Styled Components? Storybook?). I’ve included all our dependencies below

Uncaught TypeError: Cannot read property 'length' of undefined
    at serializeStyles (webpack-internal:///./node_modules/@emotion/serialize/dist/serialize.esm.js:146)
    at css (webpack-internal:///./node_modules/@emotion/css/dist/css.browser.esm.js:10)
    at Module.keyframes (webpack-internal:///./node_modules/@emotion/core/dist/core.browser.esm.js:263)
    at eval (webpack-internal:///./node_modules/docz-theme-default/dist/index.m.js:406)
    at Module../node_modules/docz-theme-default/dist/index.m.js (:3000/static/js/vendors.js:5141)
    at __webpack_require__ (:3000/static/js/runtime~app.js:801)
    at fn (:3000/static/js/runtime~app.js:164)
    at Module.eval (webpack-internal:///./.docz/app/root.jsx:6)
    at eval (webpack-internal:///./.docz/app/root.jsx:54)
    at Module../.docz/app/root.jsx (:3000/static/js/app.js:34)
    at __webpack_require__ (:3000/static/js/runtime~app.js:801)
    at fn (:3000/static/js/runtime~app.js:164)
    at Module.eval (webpack-internal:///./.docz/app/index.jsx:6)
    at eval (webpack-internal:///./.docz/app/index.jsx:69)
    at Module../.docz/app/index.jsx (:3000/static/js/app.js:22)
    at __webpack_require__ (:3000/static/js/runtime~app.js:801)
    at fn (:3000/static/js/runtime~app.js:164)
    at Object.0 (:3000/static/js/app.js:47)
    at __webpack_require__ (:3000/static/js/runtime~app.js:801)
    at checkDeferredModules (:3000/static/js/runtime~app.js:60)
    at Array.webpackJsonpCallback [as push] (:3000/static/js/runtime~app.js:47)
    at :3000/static/js/app.js:1

"dependencies": {
    "@babel/runtime": "^7.2.0",
    "downshift": "^3.1.7",
    "match-sorter": "^2.2.3",
    "polished": "^2.3.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-stage-2": "^7.0.0",
    "@emotion/cache": "^10.0.0",
    "@emotion/core": "^10.0.6",
    "@emotion/styled": "^10.0.6",
    "@storybook/addon-actions": "^4.0.12",
    "@storybook/addon-knobs": "^4.0.12",
    "@storybook/addon-options": "^4.0.12",
    "@storybook/addons": "^4.0.12",
    "@storybook/react": "^4.0.12",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.4.2",
    "babel-plugin-add-module-exports": "^1.0.0",
    "babel-plugin-flow-react-proptypes": "^24.1.1",
    "babel-plugin-import-glob": "^2.0.0",
    "babel-plugin-styled-components": "^1.9.4",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "docz": "^0.12.17",
    "docz-theme-default": "^0.12.17",
    "flow-bin": "^0.91.0",
    "jest": "^23.5.0",
    "jest-styled-components": "^7.0.0-2",
    "styled-components": "^4.1.2"
  },
  "peerDependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "styled-components": "^4.1.2"
  }

Environment

• OS: macOS 10.14.2
• Node/npm version: 10.14.1/6.4.1

Additional context/Screenshots

[ndrsllwngr]

Problem

We encountered the same issue having "docz": "0.13.7", & "@storybook/react": "^5.0.1", installed. We didn’t encounter this issue on the storybook end but docz had the following issues

• blank website
• console logs Uncaught TypeError: Cannot read property 'length' of undefined

Solution

cd node_modules/docz-core && npm i -D @emotion/serialize@0.11.x && cd .. && cd ..

Thanks to the comment (604#issuecomment-465991668) of @pdomaleczny our problem is solved for now and docz is finally up and running again. But a more permanent solution on your end would be great to provide a better compatibility to other tools.

[pdomaleczny]

I had the same issue. It turned out that I had a problem with package version of @emotion/serialize Unfortunately my other library used 0.9.x and other emotion libraries were installed with higher versions. I added manually @emotion/serialize@0.11.x and it worked ✌️

I think it would be a good idea to add @emotion/serialize in docz-theme-default package.json with defined version.