Cannot read property 'length' of undefined at serializeStyles #604

oliverjam · 2019-01-25T16:47:58Z

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

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

bustEXZ · 2019-01-30T09:50:15Z

Same issue, any ideas?

swyxio · 2019-01-30T20:05:14Z

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 · 2019-01-31T12:21:04Z

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 🤷‍♂️

swyxio · 2019-01-31T22:16:09Z

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 · 2019-01-31T22:21:25Z

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 · 2019-02-01T16:05:30Z

I have the same problem 😞
I already have [email protected] btw

eliassotodo · 2019-02-06T14:39:33Z

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

pdomaleczny · 2019-02-21T13:02:36Z

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 · 2019-03-09T21:05:23Z

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 · 2019-06-01T01:15:01Z

![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 · 2019-06-01T02:51:54Z

![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

petekp mentioned this issue Mar 6, 2019

Uncaught TypeError: Cannot read property 'length' of undefined at serializeStyles storybookjs/storybook#5934

Closed

rakannimer closed this as completed Sep 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot read property 'length' of undefined at serializeStyles #604

Cannot read property 'length' of undefined at serializeStyles #604

oliverjam commented Jan 25, 2019

bustEXZ commented Jan 30, 2019

swyxio commented Jan 30, 2019

oliverjam commented Jan 31, 2019 •

edited

Loading

swyxio commented Jan 31, 2019

oliverjam commented Jan 31, 2019

GiancarlosIO commented Feb 1, 2019 •

edited

Loading

eliassotodo commented Feb 6, 2019 •

edited

Loading

pdomaleczny commented Feb 21, 2019

ndrsllwngr commented Mar 9, 2019 •

edited

Loading

irazirfan commented Jun 1, 2019 •

edited

Loading

irazirfan commented Jun 1, 2019

Cannot read property 'length' of undefined at serializeStyles #604

Cannot read property 'length' of undefined at serializeStyles #604

Comments

oliverjam commented Jan 25, 2019

Bug Report

bustEXZ commented Jan 30, 2019

swyxio commented Jan 30, 2019

oliverjam commented Jan 31, 2019 • edited Loading

swyxio commented Jan 31, 2019

oliverjam commented Jan 31, 2019

GiancarlosIO commented Feb 1, 2019 • edited Loading

eliassotodo commented Feb 6, 2019 • edited Loading

pdomaleczny commented Feb 21, 2019

ndrsllwngr commented Mar 9, 2019 • edited Loading

irazirfan commented Jun 1, 2019 • edited Loading

irazirfan commented Jun 1, 2019

oliverjam commented Jan 31, 2019 •

edited

Loading

GiancarlosIO commented Feb 1, 2019 •

edited

Loading

eliassotodo commented Feb 6, 2019 •

edited

Loading

ndrsllwngr commented Mar 9, 2019 •

edited

Loading

irazirfan commented Jun 1, 2019 •

edited

Loading