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

ibocon · 2021-05-04T02:20:41Z

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"
  }
}

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

shilman · 2021-05-04T06:37:15Z

Do you have a repro repo you can share?

ibocon · 2021-05-05T07:00:23Z

Here.

ibocon · 2021-05-18T01:51:18Z

@shilman is there any update?

Athira001 · 2021-06-15T10:41:32Z

@shilman Facing the same issue

majolo315 · 2021-06-25T10:01:36Z

I have the same issue and nothing is works

majolo315 · 2021-06-25T11:16:56Z

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"
  }
}

shilman · 2021-09-17T08:37:24Z

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.

maugustosemperfi · 2021-10-15T14:48:42Z

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.

Even if we have a webpack.config and make it explicit to storybook main.js file?

Just for context, i've created a CRA app, but managed to run and build it as a webpack 5 project - mostly because of Module Federation. How can i run storybook + webpack 5 in this kind of project?

shilman · 2021-10-16T01:15:25Z

@maugustosemperfi CRA5 with webpack5 support should be released soon; you'll probably need to wait for that.

stale · 2022-01-09T03:18:04Z

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!

matheo · 2022-07-23T01:32:56Z

@shilman just FYI @storybook/manager-webpack5 hasn't published alphas since 10 days ago
https://www.npmjs.com/package/@storybook/manager-webpack5
and I failed to install the alpha.13 because of that

shilman · 2022-07-23T03:39:51Z

@matheo Yes, I've stopped publishing for a bit. Aside from all the improvements that have been merged since then but unreleased, is there a problem with the latest alpha?

Perhaps the issue is that manager-webpack5 doesn't exist anymore (breaking change) and there are no migration instructions? Cc @ndelangen @tmeasday

matheo · 2022-07-23T04:33:10Z

@shilman npm complained that it doesn't exist, because I'm using nx and it was present on my package.json so I removed it and everything went fine. A deprecation note would help so when we see the package in npmjs.com we search and remove it :)

Andrew-Kovalenko · 2022-10-18T10:01:06Z

@shilman Any progress on it? Problem still reprodusing for me with webpack 5 and module federation

...
 "@storybook/addon-actions": "^6.5.12",
  "@storybook/addon-essentials": "^6.5.12",
  "@storybook/addon-interactions": "^6.5.12",
  "@storybook/addon-links": "^6.5.12",
  "@storybook/builder-webpack5": "^6.5.12",
  "@storybook/manager-webpack5": "^6.5.12",
  "@storybook/react": "^6.5.12",
  ...

It makes compilation fail after updating to Webpack 5 and Node 20 even though the documentation says is should work. https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5 GitHub issues suggest that it is fixed by removing the plugin storybookjs/storybook#14789 (comment) It does not seem to make a difference to remove it entirely. This also reduces our dependency chain a bit.

ibocon added bug needs triage labels May 4, 2021

ibocon changed the title ~~Webpack 5 TypeError: Cannot read property 'length' of undefined~~ Webpack 5 - TypeError: Cannot read property 'length' of undefined May 4, 2021

shilman added needs reproduction builder-webpack5 labels May 4, 2021

shilman removed the needs reproduction label Jun 25, 2021

stale bot added the inactive label Jan 9, 2022

stale bot removed the inactive label Jul 23, 2022

imki123 mentioned this issue Dec 14, 2022

[Bug] (preset-create-react-app) [webpack-dev-middleware] TypeError: Cannot read property 'length' of undefined when updating to SB 6.3 and WebPack 5. storybookjs/presets#207

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ibocon commented May 4, 2021

shilman commented May 4, 2021

ibocon commented May 5, 2021

ibocon commented May 18, 2021

Athira001 commented Jun 15, 2021

majolo315 commented Jun 25, 2021

majolo315 commented Jun 25, 2021 •

edited

shilman commented Sep 17, 2021

maugustosemperfi commented Oct 15, 2021

shilman commented Oct 16, 2021 •

edited

stale bot commented Jan 9, 2022

matheo commented Jul 23, 2022

shilman commented Jul 23, 2022

matheo commented Jul 23, 2022

Andrew-Kovalenko commented Oct 18, 2022

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

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

Comments

ibocon commented May 4, 2021

shilman commented May 4, 2021

ibocon commented May 5, 2021

ibocon commented May 18, 2021

Athira001 commented Jun 15, 2021

majolo315 commented Jun 25, 2021

majolo315 commented Jun 25, 2021 • edited

shilman commented Sep 17, 2021

maugustosemperfi commented Oct 15, 2021

shilman commented Oct 16, 2021 • edited

stale bot commented Jan 9, 2022

matheo commented Jul 23, 2022

shilman commented Jul 23, 2022

matheo commented Jul 23, 2022

Andrew-Kovalenko commented Oct 18, 2022

majolo315 commented Jun 25, 2021 •

edited

shilman commented Oct 16, 2021 •

edited