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

[ibocon]

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

[shilman]

Do you have a repro repo you can share?

[ibocon]

Here.

[ibocon]

@shilman is there any update?

[Athira001]

@shilman Facing the same issue

[majolo315]

I have the same issue and nothing is works

[majolo315]

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]

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]

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]

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

[stale[bot]]

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]

@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]

@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]

@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]

@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",
  ...