Cannot start Storybook after migrating to Webpack 5

What's the problem? We have migrated to Webpack 5, and now we aren't able to execute start-storybook or build-storybook.

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

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'tap' of undefined at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/preset-create-react-app/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), :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), :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), :34:1) at eval (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), :47:1) (Use node --trace-warnings ... to show where the warning was created) (node:17852) 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:17852) [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: (node:17852) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'createSnapshot' of undefined at /home/mribar/Documents/projects/demo-ui/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13:36 at new Promise () at Object.createSnapshot (/home/mribar/Documents/projects/demo-ui/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:12:10) at /home/mribar/Documents/projects/demo-ui/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:219:35 (node:17852) 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: 4) (node:17852) UnhandledPromiseRejectionWarning: TypeError: compilation.getAssetPath is not a function at /home/mribar/Documents/projects/demo-ui/node_modules/html-webpack-plugin/index.js:169:25 at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) at AsyncSeriesHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20) at Compiler.emitAssets (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:491:19) at onCompiled (/home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:51:19) at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:681:15 at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at AsyncSeriesHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20) at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:678:31 at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at AsyncSeriesHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20) at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compilation.js:1423:35 at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) at AsyncSeriesHook.lazyCompileHook (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/Hook.js:154:20) at /home/mribar/Documents/projects/demo-ui/node_modules/@storybook/core-server/node_modules/webpack/lib/Compilation.js:1414:32 at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1) (node:17852) 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: 5)

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

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), :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), :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), :16:1) at eval (eval at create (/home/mribar/Documents/projects/demo-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) (Use node --trace-warnings ... to show where the warning was created) (node:17899) 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:17899) [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/javascript/JavascriptModulesPlugin.js:125 throw new TypeError( ^ 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), :87: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), :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. (/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) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! demo-ui@2.1.0 build-storybook: build-storybook -s ./src -o ./dist npm ERR! Exit status 1

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 dependencies and devDependencies. We are trying to be up to date.

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

Before upgrading from Storybook version 6.2.8 to 6.2.9, we were getting errors people reported on issue: https://github.com/storybookjs/storybook/issues/13893

We are using npm version 7.9.0. We are installing the dependencies with npm i --legacy-peer-deps. We are using node v14.16.1

storybookjs / storybook

Cannot start Storybook after migrating to Webpack 5 #14733