Unable to execute `start-storybook` or `build-storybook` after migrating to Webpack 5. #14734

milosrs · 2021-04-27T13:41:18Z

We have migrated to Webpack 5, and now we aren't able to execute start-storybook or build-storybook. Everything was fine on Webpack version 4.

Error when executing start-storybook -p 9001 -s ./src/assets is below:

info @storybook/react v6.2.9
info 
info => Loading presets
info => Serving static files from ././src/assets at /
info => Loading 2 other files in "/home/mribar/Documents/projects/demo-ui/.storybook"
info => Loading custom manager config
WARN unable to find package.json for date-and-time
info => Adding stories defined in "/home/mribar/Documents/projects/demo-ui/.storybook/main.js"
info => Loading custom manager config
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack4 setup
(node:21859) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
(Use `node --trace-deprecation ...` to show where the warning was created)
0% compiling(node:21859) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'tap' of undefined
    at /home/mribar/Documents/projects/demo-ui/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/index.js:236:65
    at SyncHook.eval [as call] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:17:1)
    at SyncHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26)
    at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28)
    at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Watching.js:77:18
    at _next2 (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)
    at eval (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:47:1)
(node:21859) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:21859) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
ℹ ｢wdm｣: wait until bundle finished: 
/home/mribar/Documents/projects/demo-ui/node_modules/webpack/lib/util/MapHelpers.js:17
        const value = map.get(key);
                          ^

TypeError: Cannot read property 'get' of undefined
    at exports.provide (/home/mribar/Documents/projects/demo-ui/node_modules/webpack/lib/util/MapHelpers.js:17:20)
    at /home/mribar/Documents/projects/demo-ui/node_modules/webpack/lib/DefinePlugin.js:289:51
    at SyncHook.eval [as call] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:631:26)
    at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:662:28)
    at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:77:18
    at _next0 (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at eval (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)
    at watchRunHook (/home/mribar/Documents/projects/demo-ui/node_modules/webpack-virtual-modules/index.js:173:5)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
    at AsyncSeriesHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:41:32)

Error when executing build-storybook -s ./src -o ./dist is below:

info @storybook/react v6.2.9
info 
info => Cleaning outputDir: /home/mribar/Documents/projects/demo-ui/dist
info => Copying static files: ././src => ./
info => Loading presets
info => Loading custom manager config
info => Compiling manager..
info => Compiling preview..
info => Loading 2 other files in "/home/mribar/Documents/projects/demo-ui/.storybook"
WARN unable to find package.json for date-and-time
info => Adding stories defined in "/home/mribar/Documents/projects/demo-ui/.storybook/main.js"
info => Loading custom manager config
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack4 setup
0% compiling(node:21924) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:21924) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/home/mribar/Documents/projects/demo-ui/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
    at /home/mribar/Documents/projects/demo-ui/node_modules/terser-webpack-plugin/dist/index.js:571:67
    at SyncHook.eval [as call] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:93:1)
    at SyncHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:631:26)
    at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:662:28)
    at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:321:11
    at Compiler.readRecords (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:529:11)
    at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/Compiler.js:318:10
    at _next1 (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at eval (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
(node:21924) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:21924) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
/home/mribar/Documents/projects/demo-ui/node_modules/webpack/lib/util/MapHelpers.js:17
        const value = map.get(key);
                          ^

TypeError: Cannot read property 'get' of undefined
    at exports.provide (/home/mribar/Documents/projects/demo-ui/node_modules/webpack/lib/util/MapHelpers.js:17:20)
    at /home/mribar/Documents/projects/demo-ui/node_modules/webpack/lib/DefinePlugin.js:289:51
    at SyncHook.eval [as call] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:631:26)
    at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:662:28)
    at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:321:11
    at Array.<anonymous> (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:534:20)
    at Storage.finished (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at callback (/home/mribar/Documents/projects/demo-ui/node_modules/graceful-fs/polyfills.js:299:20)
    at FSReqCallback.oncomplete (fs.js:183:21)

This is Storybooks main.js Webpack configuration. We have tried disabling custom rules, but we are still getting the same errors.

const path = require('path');
module.exports = {
    stories: ['../src/**/*.stories.tsx'],
    addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-storysource',
    '@storybook/addon-knobs/register'
    ],
	webpackFinal: async config => {
      /// Use Dart Sass loader
      config.module.rules.push({
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
            },
          },
        ],
        include: path.resolve(__dirname, '../'),
      });

      /// Load SVG Assets
      config.module.rules.push({
        test: /\.svg$/,
        use: ["@svgr/webpack"],
      });

      return config;
    }
};

This is our package.json list of dependencies and devDependencies.

"dependencies": {
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-storysource": "^6.2.9",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^13.1.5",
    "@tippyjs/react": "^4.2.5",
    "@types/node": "^15.0.0",
    "@types/react": "^17.0.4",
    "@types/react-dom": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin-tslint": "^4.22.0",
    "babel-jest": "^26.6.3",
    "connected-react-router": "^6.9.1",
    "cookie-parser": "^1.4.5",
    "cross-env": "^7.0.3",
    "d3-interpolate": "^2.0.1",
    "d3-scale": "^3.3.0",
    "d3-selection": "^2.0.0",
    "d3-shape": "^2.1.0",
    "d3-transition": "^2.0.0",
    "date-and-time": "^1.0.0",
    "ignore-styles": "^5.0.1",
    "jsonwebtoken": "^8.5.1",
    "lightweight-charts": "^3.3.0",
    "md5-file": "^5.0.0",
    "morgan": "^1.10.0",
    "normalize.css": "^8.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-frontload": "^2.0.0",
    "react-helmet": "^6.1.0",
    "react-loadable": "^5.5.0",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-switch": "^6.0.0",
    "redux": "^4.1.0",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "sass": "^1.32.11",
    "tippy.js": "^6.3.1",
    "webpack-node-externals": "^3.0.0"
},
"devDependencies": {
    "@babel/cli": "^7.13.16",
    "@babel/core": "^7.13.16",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-decorators": "^7.13.15",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-async-to-generator": "^7.13.0",
    "@babel/plugin-transform-react-jsx": "^7.13.12",
    "@babel/plugin-transform-runtime": "^7.13.15",
    "@babel/plugin-transform-typescript": "^7.13.0",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-flow": "^7.13.13",
    "@babel/preset-react": "^7.13.13",
    "@babel/preset-typescript": "^7.13.0",
    "@babel/register": "^7.13.16",
    "@storybook/addon-knobs": "^6.2.9",
    "@storybook/addons": "^6.2.9",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.2.9",
    "@storybook/theming": "^6.2.9",
    "@svgr/webpack": "^5.5.0",
    "@types/enzyme": "^3.10.8",
    "@types/jest": "^26.0.23",
    "@types/jsdom": "^16.2.10",
    "@types/react-test-renderer": "^17.0.1",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-import-ignore": "^1.1.0",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "compression": "^1.7.4",
    "copy-webpack-plugin": "^8.1.1",
    "css-loader": "^5.2.4",
    "css-minimizer-webpack-plugin": "^2.0.0",
    "enzyme": "^3.11.0",
    "eslint": "^7.25.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-flowtype": "^5.7.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-jsdoc": "^32.3.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^2.5.4",
    "express": "^4.17.1",
    "gh-pages": "^3.1.0",
    "ignore-loader": "^0.1.2",
    "jest": "^26.6.3",
    "jest-css-modules-transform": "^4.2.1",
    "jest-fetch-mock": "^3.0.3",
    "jest-svg-transformer": "^1.0.0",
    "jsdom": "^16.5.3",
    "koa-connect": "^2.1.0",
    "mini-css-extract-plugin": "^1.5.0",
    "node-polyfill-webpack-plugin": "^1.1.0",
    "null-loader": "^4.0.1",
    "prettier": "^2.2.1",
    "prettier-check": "^2.0.0",
    "react-test-renderer": "^17.0.2",
    "sass-loader": "^11.0.1",
    "sass-resources-loader": "^2.2.1",
    "source-map-loader": "^2.0.1",
    "storybook": "^6.2.9",
    "style-loader": "^2.0.0",
    "ts-jest": "^26.5.5",
    "ts-loader": "^9.1.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-loader": "^3.5.4",
    "tslint-plugin-prettier": "^2.3.0",
    "typescript": "^4.2.4",
    "use-resize-observer": "^7.0.0",
    "webpack": "^5.35.1",
    "webpack-cli": "^4.6.0",
    "webpack-merge": "^5.7.3"
  }

We are using npm v7.9.0.
We are installing the dependencies with npm i --legacy-peer-deps. We suspect that this is an actual issue, since storybook is still using Webpack 4.
We are using node v14.16.1.

Any workaround or suggestion will be appreciated.

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

crobinson42 · 2021-04-27T21:10:12Z

@milosrs I had some issues migrating and running npm update on my project solved the problems, my $.02

milosrs · 2021-04-28T09:38:39Z

@crobinson42 This doesn't solve the issue for us

shilman · 2021-04-28T10:41:36Z

Did you read this? https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

milosrs · 2021-04-28T15:53:34Z

@shilman https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade

Upgrade section worked like a charm. Thank you!

milosrs added needs triage question / support labels Apr 27, 2021

shilman added builder-webpack5 and removed needs triage labels Apr 28, 2021

milosrs closed this as completed Apr 28, 2021

vincentpalita mentioned this issue Dec 18, 2021

Storybook 6.4 build failing with Angular 13.1 #16977

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to execute `start-storybook` or `build-storybook` after migrating to Webpack 5. #14734

Unable to execute `start-storybook` or `build-storybook` after migrating to Webpack 5. #14734

milosrs commented Apr 27, 2021

crobinson42 commented Apr 27, 2021

milosrs commented Apr 28, 2021

shilman commented Apr 28, 2021

milosrs commented Apr 28, 2021

Unable to execute start-storybook or build-storybook after migrating to Webpack 5. #14734

Unable to execute start-storybook or build-storybook after migrating to Webpack 5. #14734

Comments

milosrs commented Apr 27, 2021

crobinson42 commented Apr 27, 2021

milosrs commented Apr 28, 2021

shilman commented Apr 28, 2021

milosrs commented Apr 28, 2021

Unable to execute `start-storybook` or `build-storybook` after migrating to Webpack 5. #14734

Unable to execute `start-storybook` or `build-storybook` after migrating to Webpack 5. #14734