Docz: Cannot read property 'length' of undefined at serializeStyles

[oliverjam]

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

[bustEXZ]

Same issue, any ideas?

[sw-yx]

youre using styled-components -and- emotion -and- storybook with -docz-? too many degrees of freedom to debug here. try starting from a clean project and adding things slowly, or it is very hard to help

[oliverjam]

EDIT: a team member manually added Webpack as a dependency and it appears to have fixed this error (following instructions in #596)

So try npm i -D [email protected]

---

We're not using Emotion, Docz is. I had to install all those Emotion dependencies just to get Docz to build.

We had an existing project using Styled Components and Storybook that we added Docz to. It was working fine until we updated to the latest release, so I was hoping there would be a quick answer for what had broken.

I appreciate this is difficult to debug, apologies. I hadn't seen anyone else mention this specific error in an issue so I figured it was worth highlighting for people googling it. It seems at least a few more people are having the same problem.

I'll try to reproduce in a smaller repo when I get time. I did make an attempt but I hit a totally different bug with a fresh Docz install and gave up 🤷‍♂️

[sw-yx]

sorry for the frustration @oliverjam. file a new issue for that fresh install and i'll work with you on that. lets shave the yak

[oliverjam]

No need to apologise! I fully understand there are growing pains in a project this complex, especially when you jump all in this early.

See my edit above: I think the instructions to manually add a Webpack dependency from #596 fixed this issue (it also fixed my problem with a totally fresh Docz install, so possibly they're related)

[GiancarlosIO]

I have the same problem :disappointed:
I already have [email protected] btw

[bsotodo]

I have the same problem and I already had webpack and upgrading to to v4.2.8.4 didn't solve the issue

[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/[email protected] and it worked ✌️

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

[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/[email protected] && 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.

[irazirfan]

![Screenshot (32)](https://user-images.githubusercontent.com/36075533/58741612-e6682580-843c-11e9-842f-800656450993.png)

got same problem how to fix this?
"dependencies": {
"body-parser": "^1.19.0",
"bootstrap": "^4.3.1",
"dateformat": "^3.0.3",
"ejs": "^2.6.1",
"express": "^4.17.1",
"express-partials": "^0.3.0",
"jquery": "^3.4.1",
"mysql": "^2.17.1",
"tether": "^1.4.6"
}
node version 10.15.3
npm version 6.9.0

[irazirfan]

![Screenshot (32)](https://user-images.githubusercontent.com/36075533/58741612-e6682580-843c-11e9-842f-800656450993.png)

got same problem how to fix this?
"dependencies": {
"body-parser": "^1.19.0",
"bootstrap": "^4.3.1",
"dateformat": "^3.0.3",
"ejs": "^2.6.1",
"express": "^4.17.1",
"express-partials": "^0.3.0",
"jquery": "^3.4.1",
"mysql": "^2.17.1",
"tether": "^1.4.6"
}
node version 10.15.3
npm version 6.9.0

LoL , My xampp server (mysql) was off