Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack 5 - TypeError: Cannot read property 'length' of undefined

See original GitHub issue

Describe the bug npm run storybook failed with TypeError: Cannot read property 'length' of undefined.

To Reproduce

npx sb@next init --builder webpack5
npx sb@next upgrade --prerelease
npm i -D @storybook/builder-webpack5@next
npm i -D dotenv-webpack
npm run storybook

System

Additional context

I followed this

{
  "name": "ledger",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@redux-devtools/core": "^3.9.0",
    "@redux-devtools/instrument": "^1.11.0",
    "@reduxjs/toolkit": "^1.5.1",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "antd": "^4.15.4",
    "axios": "^0.21.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "redux": "^4.1.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "styled-components": "^5.2.3",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "webpack serve",
    "build": "webpack",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/plugin-transform-runtime": "^7.13.15",
    "@babel/preset-env": "^7.14.1",
    "@babel/preset-react": "^7.13.13",
    "@babel/preset-typescript": "^7.13.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "@storybook/addon-actions": "^6.3.0-alpha.19",
    "@storybook/addon-essentials": "^6.3.0-alpha.19",
    "@storybook/addon-links": "^6.3.0-alpha.19",
    "@storybook/builder-webpack5": "^6.3.0-alpha.19",
    "@storybook/node-logger": "^6.3.0-alpha.19",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.3.0-alpha.19",
    "@types/history": "^4.7.8",
    "@types/jest": "^26.0.23",
    "@types/node": "^14.14.43",
    "@types/react": "^17.0.4",
    "@types/react-dom": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@types/redux-logger": "^3.0.8",
    "@types/styled-components": "^5.1.9",
    "babel-loader": "^8.2.2",
    "babel-plugin-styled-components": "^1.12.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "classnames": "^2.3.1",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.2.4",
    "dotenv-webpack": "^7.0.2",
    "fork-ts-checker-webpack-plugin": "^6.2.5",
    "html-webpack-plugin": "^5.3.1",
    "image-minimizer-webpack-plugin": "^2.2.0",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.2",
    "imagemin-svgo": "^8.0.0",
    "miragejs": "^0.1.41",
    "raw-loader": "^4.0.2",
    "react-refresh": "^0.9.0",
    "sass": "^1.32.12",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.2.0",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "typescript": "^4.2.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:14 (6 by maintainers)

Top GitHub Comments

22reactions

majolo315commented, Jun 25, 2021

OK, It is able to fix this issue by commenting this addon in main.js > preset-create-react-app The both commands “storybook” and “build-storybook” will magically works after this little change. I installed storybook as clean installation via: “npx sb@next init --builder webpack5” and comment line in main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    /*"@storybook/preset-create-react-app"*/
  ],
  "core": {
    "builder": "webpack5"
  }
}

2reactions

shilmancommented, Sep 17, 2021

For those of you using CRA, at this point in time Storybook for CRA CAN’T be webpack5-compatible because CRA isn’t webpack5-compatible and Storybook for CRA uses CRA’s webpack config.

Top Results From Across the Web

getting error 'Cannot read property 'length' of undefined ...

d.ts file. In another it was a missing environment ts file. Adding a console.log(fileName) in the beginning of the createSourceFile function at node_modules/ ......

Cannot Read Property Length of Undefined in JavaScript

The JavaScript TypeError: Cannot read property 'length' of undefined occurs when the length property is read on an undefined variable.

Cannot read property \\\'length\\\' of undefined

Hello guys. Ive just downloaded https://git.mdbootstrap.com/mdb/jquery/jq-pro and I have problem whenever i try to use PRO scss.

Cannot read properties of undefined (reading 'length')

This error can be thrown for a lot of reasons, as it is incredibly common to reference the length property of string or...

[SOLVED] Cannot Read Property 'length' of Undefined in JS

To fix the “cannot read property 'length' of undefined” error, perform an undefined check on the variable before accessing the length property ......