Webpack v5 Upgrade - `start-storybook` works but `build-storybook` fails #13893

lanesawyer · 2021-02-12T22:38:05Z

Describe the bug
I recently upgrade my project to Webpack v5. The start-storybook command works just fine, but when I run build-storybook, I get the following error:

info @storybook/react v6.1.11
info
info => Cleaning outputDir C:\Dev\bkp-client\storybook-static
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Loading custom babel config
info => Compiling manager..
C:\Dev\bkp-client\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119
                        throw new TypeError(
                        ^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (C:\Dev\bkp-client\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
    at C:\Dev\bkp-client\node_modules\terser-webpack-plugin\dist\index.js:571:67
    at SyncHook.eval [as call] (eval at create (C:\Dev\bkp-client\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:87:1)
    at SyncHook.lazyCompileHook (C:\Dev\bkp-client\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Dev\bkp-client\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Dev\bkp-client\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.compile (C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:662:28)
    at C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:321:11
    at Array.<anonymous> (C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:534:20)
    at Storage.finished (C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at C:\Dev\bkp-client\node_modules\@storybook\core\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at callback (C:\Dev\bkp-client\node_modules\graceful-fs\polyfills.js:295:20)
    at FSReqCallback.oncomplete (fs.js:183:21)
npm ERR! code 1

I saw a similar error with the html-webpack-plugin, so it may just be that Storybook 6 is incompatable with Webpack 5, but it's strange that start-storybook works while build-storybook fails.

To Reproduce
Use Storybook with Webpack v5.

Expected behavior
I would expect that a working start-storybook implies that build-storybook works as well. It's a bit confusing to have my normal Storybook workflow work perfectly but the build tools are unable to build. How does start-storybook actually work if it's not building the Storybook?

System
Environment Info:

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
Binaries:
Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
npm: 7.5.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 88.0.4324.150
Edge: Spartan (44.18362.449.0)
npmPackages:
@storybook/addon-actions: ^6.1.11 => 6.1.11
@storybook/addon-links: ^6.1.11 => 6.1.11
@storybook/addons: ^6.1.11 => 6.1.11
@storybook/preset-typescript: ^3.0.0 => 3.0.0
@storybook/react: ^6.1.11 => 6.1.11
@storybook/storybook-deployer: ^2.8.7 => 2.8.7

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

phated · 2021-02-12T22:51:17Z

Hey @lanesawyer! Storybook doesn't currently support Webpack 5. You can check out the ongoing progress in #13808

I'm going to close this up because the webpack 5 epic is #9216

Hypnosphi · 2021-02-26T17:35:33Z

I encounter exactly this when trying to follow https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

Reproduction: https://github.com/JetBrains/ring-ui/tree/webpack-5

npm install
npm run bootstrap
npm run build

shilman · 2021-03-01T10:34:09Z

@Hypnosphi OK I figured it out. The problem is that you're using a custom addon (called a preset in your codebase, but we're calling everything addons now -- the documentation and presets repo haven't caught up yet), and that uses webpack. Since Storybook uses webpack4 to build the manager, and your custom-header uses webpack5, it's causing the crash.

There are also some hoisting-related issues (terser-webpack-plugin and html-webpack-plugin) that can be overcome by installing the right versions at the root of the repo, but the wepback5-based manager issue is a show stopper, potentially solved by #14044

Hypnosphi · 2021-03-01T12:20:15Z

@shilman I see. I think I'll just extract custom-header into a separate lerna package with its own dependencies

marjisound · 2021-03-04T15:47:05Z

@lanesawyer Did you manage to solve the issue you had regarding the build-storybook ? I'm having the exact same problem and I tried so many different alpha versions including #14044 but none works

shilman · 2021-03-04T23:04:57Z

@lanesawyer @marjisound very interested in identifying the failure modes, so if you (or anybody else) is experiencing this issue and have a repro repo I'd be happy to take a look

jessevanassen · 2021-03-05T09:21:42Z

We are running into this issue in the https://gitlab.com/riovir/vue-app-scaffolding repository which can be used as a reproduction. It currently breaks on the v11.6.0 tag.

Reproduction recipe:

git clone git@gitlab.com:riovir/vue-app-scaffolding.git --branch v11.6.0
cd vue-app-scaffolding
npm ci
npm run storybook:build

Your prior suggestion to install the terser-webpack-plugin solved the issue for us.

shilman · 2021-03-05T09:41:39Z

@jessevanassen thanks for the repro! however, i'm having trouble getting it:

MMBP15:testing shilman$ git clone git@gitlab.com:riovir/vue-app-scaffolding.git --branch v11.6.0
Cloning into 'vue-app-scaffolding'...
git@gitlab.com: Permission denied (publickey,keyboard-interactive).
fatal: Could not read from remote repository.

riovir · 2021-03-05T10:05:52Z

EDIT: I've added a line to bump Storybook to its latest version. (Original sample was still at BETA 5.)

You may want to use the https format of the repo:

git clone https://gitlab.com/riovir/vue-app-scaffolding.git
cd vue-app-scaffolding
npm install
npm install @storybook/addon-essentials@next @storybook/addons@next @storybook/builder-webpack5@next @storybook/vue@next
npm run storybook:build

Hope it helps!

shilman · 2021-03-06T02:47:19Z

@riovir thanks for this. i haven't gotten to the bottom of it yet, but my guess is it's a hoisting issue. I reinstalled with yarn just for testing purposes and that works fine. I'll see if I can figure out what's going on with npm.

marjisound · 2021-03-08T17:29:39Z

@lanesawyer @marjisound very interested in identifying the failure modes, so if you (or anybody else) is experiencing this issue and have a repro repo I'd be happy to take a look

Thanks @shilman We actually managed to fix the TypeError: The 'compilation' argument must be an instance of Compilation issue for build-storybook by tweaking the way terser-webpack-plugin is installed => npm i terser-webpack-plugin && npm remove terser-webpack-plugin

But now we are having a new issue on both build-storybook & start-storybook for ts-loader module build
TypeError: Cannot read property 'tap' of undefined for which I created a new issue #14170

martynd · 2021-03-08T22:05:21Z

The majority of the times that I've had erratic TypeError: The 'compilation' argument must be an instance of Compilation errors, it has been caused by separate installs of webpack 4 getting caught up in imports causing the instanceof tests to go sideways.
This would likely fit with people having differing successes when it comes to changing how modules are imported/installed and the inconsistencies in how it manifests.

Some of this might be better in the webpack 5 thread, but ive built both the preview and manager with webpack 5 with relatively few changes (though that use case is limited to the react framework)

One thing I would definitely search for is multiple versions of webpack, webpack-dev-middleware, terser-webpack-plugin and the likes installed in various storybook modules/addons. I think at one point between storybook addons and the base storybook install itself I had 5 extra webpack installs present.

With just a clean install of @storybook/react I end up with webpack installed in
@storybook/react/node_modules/webpack
and
@storybook/core/node_modules/webpack, likewise dev-middleware and a couple of webpack plugins

with addons and so on, you can end up with many more.

If you are running entirely on webpack 5 (as would seem to be the case for you @marjisound), I would suggest identifying locations where things are doubled up or more

For example with
find node_modules/@storybook/ | grep terser-webpack-plugin/package.json
find node_modules/@storybook/ | grep /webpack/package.json

Any single instance of one of these can trigger errors like you've seen if you're trying to use a webpack5 only build env

As a side note, the packages were populated with yarn

PascalPixel · 2021-04-06T15:57:47Z

@marjisound's npm i terser-webpack-plugin && npm remove terser-webpack-plugin fixed it for us 👏

daviddelusenet · 2021-04-06T17:31:49Z

I'm also experiencing this issue unfortunately 😞

daviddelusenet · 2021-04-08T08:43:45Z

Some additional information from my end, I currently have the following (dev) dependencies:

"dependencies": {
  "html-react-parser": "^1.2.4",
  "react-spring": "^8.0.27",
  "styled-components": "^5.2.3",
  "uuid": "^8.3.2"
},
"devDependencies": {
  "@babel/core": "^7.13.14",
  "@babel/plugin-proposal-class-properties": "^7.13.0",
  "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
  "@babel/preset-env": "^7.13.12",
  "@babel/preset-react": "^7.13.13",
  "@babel/preset-typescript": "^7.13.0",
  "@commitlint/cli": "^12.1.1",
  "@commitlint/config-conventional": "^12.1.1",
  "@iteratec/semantic-release-bitbucket": "^1.1.1",
  "@semantic-release/changelog": "^5.0.1",
  "@semantic-release/commit-analyzer": "^8.0.1",
  "@semantic-release/git": "^9.0.0",
  "@semantic-release/npm": "^7.0.9",
  "@semantic-release/release-notes-generator": "^9.0.2",
  "@storybook/addon-a11y": "^6.2.5",
  "@storybook/addon-actions": "^6.2.5",
  "@storybook/addon-docs": "^6.2.5",
  "@storybook/addon-knobs": "^6.2.5",
  "@storybook/addon-links": "^6.2.5",
  "@storybook/addon-storyshots": "^6.2.5",
  "@storybook/addon-storysource": "^6.2.5",
  "@storybook/addon-viewport": "^6.2.5",
  "@storybook/core": "^6.2.5",
  "@storybook/preset-typescript": "^3.0.0",
  "@storybook/react": "^6.2.5",
  "@storybook/source-loader": "^6.2.5",
  "@types/jest": "^26.0.22",
  "@types/react": "^17.0.3",
  "@types/react-dom": "^17.0.3",
  "@types/react-helmet": "^6.1.0",
  "@types/react-test-renderer": "^17.0.1",
  "@types/styled-components": "^5.1.9",
  "@types/uuid": "^8.3.0",
  "@types/webpack": "^4.41.27",
  "@typescript-eslint/eslint-plugin": "^4.21.0",
  "@typescript-eslint/parser": "^4.21.0",
  "audit-ci": "^3.2.0",
  "babel-jest": "^26.6.3",
  "babel-loader": "^8.2.2",
  "babel-plugin-require-context-hook": "^1.0.0",
  "babel-plugin-styled-components": "^1.12.0",
  "commitizen": "^4.2.3",
  "cz-conventional-changelog": "^3.3.0",
  "eslint": "^7.23.0",
  "eslint-config-prettier": "^8.1.0",
  "eslint-plugin-jest": "^24.3.4",
  "eslint-plugin-prettier": "^3.3.1",
  "eslint-plugin-react": "^7.23.1",
  "eslint-plugin-react-hooks": "^4.2.0",
  "husky": "^4.3.8",
  "jest": "^26.6.3",
  "jest-styled-components": "^7.0.3",
  "prettier": "^2.2.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-is": "^17.0.2",
  "react-test-renderer": "^17.0.2",
  "rimraf": "^3.0.2",
  "semantic-release": "^17.4.2",
  "serverless": "^1.83.3",
  "serverless-s3-deploy": "^0.9.0",
  "typescript": "^4.2.4",
  "webpack": "^4.46.0",
  "webpack-cli": "^3.3.12"
}

I'm in the process of updating of all my dependencies, this is the result of npm outdated:

@semantic-release/npm    7.0.9    7.1.0   7.1.0  @codedazur/react-components
@types/webpack         4.41.27  4.41.27  5.28.0  @codedazur/react-components
husky                    4.3.8    4.3.8   6.0.0  @codedazur/react-components
react-spring            8.0.27   8.0.27   9.0.0  @codedazur/react-components
webpack                 4.46.0   4.46.0  5.31.0  @codedazur/react-components
webpack-cli             3.3.12   3.3.12   4.6.0  @codedazur/react-components

With this setup everything is working fine. Now let's try to update to Webpack 5:

npm i webpack@latest webpack-cli@latest && npm i -D @storybook/builder-webpack5

Added the following part to my main.js configuration:

core: {
  builder: "webpack5",
}

After this when I try to start Storybook I get the following error:

10% building 0/14 entries 1/14 dependencies 0/0 modules(node:23201) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'createSnapshot' of undefined
    at /Users/daviddelusenet/Development/react-components/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (/Users/daviddelusenet/Development/react-components/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:12:10)
    at /Users/daviddelusenet/Development/react-components/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:219:35
(node:23201) 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: 3)
(node:23201) [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.
99% done plugins webpack-hot-middlewarewebpack built preview 0f13fed3c7c293f9d2aa in 25450ms
(node:23201) UnhandledPromiseRejectionWarning: TypeError: compilation.getAssetPath is not a function
    at /Users/daviddelusenet/Development/react-components/node_modules/html-webpack-plugin/index.js:169:25
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.emitAssets (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:491:19)
    at onCompiled (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:51:19)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compilation.js:1414:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
(node:23201) 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)

After some Googling I found this issue and running npm i --save-dev html-webpack-plugin solved the error above. I can now start Storybook but I get the following error:

Cannot GET /

And when I try to build Storybook I get the following error:

 /Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:113
			throw new TypeError(
			^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/daviddelusenet/Development/react-components/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:113:10)
    at /Users/daviddelusenet/Development/react-components/node_modules/terser-webpack-plugin/dist/index.js:571:67
    at SyncHook.eval [as call] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:85:1)
    at SyncHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/daviddelusenet/Development/react-components/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:321:11
    at Array.<anonymous> (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:534:20)
    at Storage.finished (/Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/daviddelusenet/Development/react-components/node_modules/@storybook/core-server/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at callback (/Users/daviddelusenet/Development/react-components/node_modules/graceful-fs/polyfills.js:295:20)
    at FSReqCallback.oncomplete (fs.js:167:21)

Please let me know if you need any more information.

cascornelissen · 2021-04-08T10:00:41Z

I ran into a similar problem and had to install both html-webpack-plugin@latest and terser-webpack-plugin@latest manually to resolve everything. To figure out which plugin you need to install check the stacktrace that's included in the error. The second line starting with at usually shows which dependency is causing the issue.

So in the previous comment by @daviddelusenet, the first stacktrace includes the following on the second line. Installing html-webpack-plugin solved this for @daviddelusenet.

    at /Users/daviddelusenet/Development/react-components/node_modules/html-webpack-plugin/index.js:169:25

The last snippet in that same comment includes the following on the second line.

    at /Users/daviddelusenet/Development/react-components/node_modules/terser-webpack-plugin/dist/index.js:571:67

This indicates that terser-webpack-plugin is now the one causing the error so that also needs to be installed via npm install --save-dev terser-webpack-plugin@latest to ensure the correct version is resolved when compiling.

Hope this helps anyone ✌🏼

shimorojune · 2021-04-10T14:13:25Z

@marjisound's npm i terser-webpack-plugin && npm remove terser-webpack-plugin fixed it for us 👏

This solved the problem for us too

jsdw · 2021-04-15T12:15:58Z

Just to chime in, I have hit precisely the same issue as @Hypnosphi has above using webpack 5.33.2

LeoRosse · 2021-04-27T09:08:07Z

Same issue for me as @Hypnosphi has above using webpack:5.35.1, I tried to install storybook in a clean project with npx sb@next init --builder webpack5 and I have this result when running start-storybook:

/node_modules/webpack/lib/util/MapHelpers.js:17
	const value = map.get(key);
	                  ^

TypeError: Cannot read property 'get' of undefined

SimTheFool · 2021-04-27T11:03:27Z

Same issue with webpack 5. Is there any workaround around ?

milosrs · 2021-04-28T15:54:57Z

This is your answer: https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade

LeoRosse · 2021-04-28T16:41:33Z

@milosrs I have tried this npx sb@next init --builder webpack5 cause I have a clean webpack 5 project and the issue is the same... I have node version 14.16.1, npm version 6.14.12, and as I mentioned webpack version 5.35.1...

milosrs · 2021-04-28T21:40:29Z

@LeoRosse Delete @storybook/create-react-app plugin from package.json, try upgrading to npm v7.11 and run npm i --legacy-peer-deps

SimTheFool · 2021-04-29T15:02:26Z

Still not working for me with your procedure @milosrs . I never had @storybook/create-react-app plugin (I don't use create-react-app). I'm with npm 7.11.1 and webpack 5.24.3 and node 14.15.5

LeoRosse · 2021-04-29T15:08:53Z

same as @SimTheFool for me @milosrs .. I haven't created the project with create react app and I tried with npm 7.11.1, webpack 5.35.0 and node 14.16.1

milosrs · 2021-04-30T10:43:13Z

What are the versions of your storybook and addons?

SimTheFool · 2021-04-30T10:56:09Z

I got those plugins in package.json after installing storybook in the way you recommended.

   "@storybook/addon-actions": "^6.3.0-alpha.17",
    "@storybook/addon-essentials": "^6.3.0-alpha.17",
    "@storybook/addon-links": "^6.3.0-alpha.17",
    "@storybook/builder-webpack5": "^6.3.0-alpha.17",
    "@storybook/react": "^6.3.0-alpha.17",

LeoRosse · 2021-04-30T11:07:43Z

Same for me!

milosrs · 2021-05-05T09:54:04Z

I cant help you since I used create-react-app. The packages that you have are the same as mine.

mdobroggg · 2021-05-21T15:37:17Z

I didn't have terser-webpack-plugin at all and was running fine until a few days ago. I got this error as well and simply installing the plugin fixed it for me on the latest alphas (6.3.0-alpha.36)

Angry-Sparrow · 2021-05-24T03:36:34Z

I install terser-webpack-plugin by way of npm i -D terser-webpack-plugin.
It works.
But I still don't understand why I need terser-webpack-plugin.

vikashruhilgit · 2021-08-20T16:31:54Z

Hi,

it's been several days since i stuck with the issue,

i tried all the solution but no luck.

will be please help me out.

issue is :

start-storybook works but build-storybook fails

start-storybook works smooth with add-ons as well.

but build-storybook fails, if i add any of the addons in .storybook.main.ts

error is:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43478) UnhandledPromiseRejectionWarning: Error: [@web/dev-server-storybook] Official storybook addons are not es modules, and cannot be loaded from this storybook implementation. at Object.createError (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/utils.js:10:12) at validateMainJs (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:26:27) at Object.readStorybookConfig (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:56:20)

and also if i remove addons then also its fails and throw an error:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43347) UnhandledPromiseRejectionWarning: Error: The keyword 'interface' is reserved (Note that you need plugins to import files that are not JavaScript) at error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:151:30) at Module.error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10059:16) at Module.tryParse (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10462:25) at Module.setSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10365:24) at ModuleLoader.addModuleSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19708:20) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19764:9) at async Promise.all (index 2) at async ModuleLoader.fetchStaticDependencies (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19790:34) at async Promise.all (index 0) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19766:9) (Use node --trace-warnings ...to show where the warning was created) (node:43347) 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:43347) [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.

my configurations are:

its a web component package library by open-wc generator.

then i upgraded that to latest storybook for sass support. everything is working except build-storybook

project dependencies and dev-dependencies are:

"dependencies": { "lit-element": "^2.5.1", "lit-html": "^1.4.1", }, "devDependencies": { "@open-wc/eslint-config": "^4.3.0", "@open-wc/testing": "^2.5.33", "@storybook/addon-essentials": "^6.3.7", "@storybook/addons": "^6.3.7", "@storybook/builder-webpack5": "^6.2.9", "@storybook/manager-webpack5": "^6.2.9", "@storybook/web-components": "^6.3.7", "@types/webpack": "^5.0.0", "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "@web/dev-server": "^0.1.17", "@web/dev-server-storybook": "^0.3.5", "@web/test-runner": "^0.12.20", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^4.0.0-alpha.0", "concurrently": "^5.3.0", "css-loader": "^6.2.0", "eslint": "^7.29.0", "eslint-config-prettier": "^7.2.0", "extract-loader": "^5.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.4", "lit": "^2.0.0-rc.2", "lit-scss-loader": "^1.1.0", "prettier": "^2.2.1", "sass": "^1.38.0", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", "ts-loader": "^9.2.5", "tslib": "^2.3.0", "typescript": "^4.3.5", "webpack": "^5.51.1", "webpack-cli": "^4.8.0" },

and main.js is:

`const path = require('path');

module.exports = {
stories: [
'../stories/.stories.mdx',
'../stories/.stories.@(js|jsx|ts|tsx)',
],
addons: [
path.resolve('./.storybook/my-preset'),
'@storybook/addon-essentials',
],
core: {
builder: 'webpack5',
},
};
`

and my-preset is:

`const path = require('path');

module.exports = {
managerWebpack: async (config, options) => {
// update config here
return config;
},
managerBabel: async (config, options) => {
// update config here
return config;
},
webpackFinal: async (config, { configType }) => {
// configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.

// Make whatever fine-grained changes you need

config.module.rules.push({
  test: /\.scss$/,
  use: ['lit-scss-loader', 'extract-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});
return config;

},
babel: async (config, options) => {
return config;
},
};
`

REPO is:
https://github.com/vikashruhilgit/UI/

tylerexmg · 2022-03-08T15:52:34Z

I think this has to do with the storybook init installing both the webpack 4 and webpack 5 packages. The dependency for terser-webpack-plugin in webpack 4 is trumping the one in webpack 5 so it is breaking when trying to build with webpack 5. Manually installling terser-webpack-plugin then fixes the dependency but I think the ultimate fix should be for Storybook to remove all of the webpack 4 packages for users using webpack 5.

AntonyF-Andreani · 2022-03-14T14:32:34Z

In my case the same lines (suggested by @PascalPixel) helpme to fix the error on build:

npm i terser-webpack-plugin and then (because I'm on windows) npm remove terser-webpack-plugin.

I guess it has to do with dependencies. in my case use, React, Typescript, and react-doc-gen

This is the result of npm ls webpack

+-- @storybook/addon-essentials@6.4.19
| +-- @storybook/addon-docs@6.4.19
| | +-- @storybook/builder-webpack4@6.4.19
| | | +-- file-loader@6.2.0
| | | | `-- webpack@5.70.0 deduped
| | | +-- html-webpack-plugin@4.5.2
| | | | `-- webpack@4.46.0 deduped
| | | +-- postcss-loader@4.3.0
| | | | `-- webpack@5.70.0 deduped
| | | +-- raw-loader@4.0.2
| | | | `-- webpack@5.70.0 deduped
| | | +-- terser-webpack-plugin@4.2.3
| | | | `-- webpack@4.46.0 deduped
| | | +-- url-loader@4.1.1
| | | | `-- webpack@5.70.0 deduped
| | | +-- webpack-dev-middleware@3.7.3
| | | | `-- webpack@5.70.0 deduped
| | | +-- webpack-filter-warnings-plugin@1.2.1
| | | | `-- webpack@4.46.0 deduped
| | | `-- webpack@4.46.0
| | |   `-- terser-webpack-plugin@1.4.5
| | |     `-- webpack@4.46.0 deduped
| | `-- webpack@5.70.0 deduped
| `-- webpack@5.70.0
|   `-- terser-webpack-plugin@5.3.1
|     `-- webpack@5.70.0 deduped
+-- @storybook/addon-interactions@6.4.19
| `-- @storybook/core-common@6.4.19
|   +-- fork-ts-checker-webpack-plugin@6.5.0
|   | `-- webpack@4.46.0 deduped
|   `-- webpack@4.46.0
|     `-- terser-webpack-plugin@1.4.5
|       `-- webpack@4.46.0 deduped
+-- @storybook/preset-scss@1.0.3
| +-- css-loader@3.6.0
| | `-- webpack@5.70.0 deduped
| `-- style-loader@1.3.0
|   `-- webpack@5.70.0 deduped
+-- @storybook/react-docgen-typescript-plugin@1.0.2-canary.253f8c1.0
| `-- webpack@5.70.0 deduped
+-- @storybook/react@6.4.19
| +-- @pmmmwh/react-refresh-webpack-plugin@0.5.4
| | `-- webpack@5.70.0 deduped
| +-- @storybook/core@6.4.19
| | +-- @storybook/core-client@6.4.19
| | | `-- webpack@5.70.0 deduped
| | +-- @storybook/core-server@6.4.19
| | | +-- @storybook/manager-webpack4@6.4.19
| | | | +-- html-webpack-plugin@4.5.2
| | | | | `-- webpack@4.46.0 deduped
| | | | +-- terser-webpack-plugin@4.2.3
| | | | | `-- webpack@4.46.0 deduped
| | | | `-- webpack@4.46.0
| | | |   `-- terser-webpack-plugin@1.4.5
| | | |     `-- webpack@4.46.0 deduped
| | | `-- webpack@4.46.0
| | |   `-- terser-webpack-plugin@1.4.5
| | |     `-- webpack@4.46.0 deduped
| | `-- webpack@5.70.0 deduped
| `-- webpack@4.46.0
|   `-- terser-webpack-plugin@1.4.5
|     `-- webpack@4.46.0 deduped
+-- babel-loader@8.2.3
| `-- webpack@5.70.0 deduped
+-- html-webpack-plugin@5.5.0
| `-- webpack@5.70.0 deduped
+-- next@11.1.2
| `-- @next/react-refresh-utils@11.1.2
|   `-- webpack@5.70.0 deduped
+-- react-docgen-typescript-loader@3.7.2
| `-- @webpack-contrib/schema-utils@1.0.0-beta.0
|   `-- webpack@4.46.0
|     `-- terser-webpack-plugin@1.4.5
|       `-- webpack@4.46.0 deduped
+-- sass-loader@10.0.2
| `-- webpack@5.70.0 deduped
`-- ts-loader@8.2.0
  `-- webpack@5.70.0 deduped

fexxdev · 2022-08-02T09:42:09Z

I've (FINALLY) found a solution to this problem, hope it helps to somebody!
First of all, you need to check which webpack version does @angular-devkit/build-angular use.
Then, you have to had into devDependencies that exact version of webpack.
Finally, this is what actually fixes the multiple webpack version issue:

"overrides": {
    "@storybook/addon-docs@6.5.9": {
        "webpack": "5.73.0"
    },
    "@storybook/angular@6.5.9": {
        "webpack": "5.73.0"
     }
  }

Cheers! :)

bzh2610 · 2022-11-09T16:53:49Z

I encountered a similar issue with the terser pluggin ( Storybook v7.0.0-alpha.47 + Angular 13 ), my workarround was to apply the following change in the webpackFinal parameter of .storybook/main.js

module.exports = {
 [...]
  webpackFinal: async (config) => {
    config.optimization.minimize = false;
    return config;
  },
};

hsuehic · 2023-03-15T05:36:55Z

Hi,

it's been several days since i stuck with the issue,

i tried all the solution but no luck.

will be please help me out.

issue is :

start-storybook works but build-storybook fails

start-storybook works smooth with add-ons as well.

but build-storybook fails, if i add any of the addons in .storybook.main.ts

error is:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43478) UnhandledPromiseRejectionWarning: Error: [@web/dev-server-storybook] Official storybook addons are not es modules, and cannot be loaded from this storybook implementation. at Object.createError (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/utils.js:10:12) at validateMainJs (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:26:27) at Object.readStorybookConfig (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:56:20)

and also if i remove addons then also its fails and throw an error:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43347) UnhandledPromiseRejectionWarning: Error: The keyword 'interface' is reserved (Note that you need plugins to import files that are not JavaScript) at error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:151:30) at Module.error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10059:16) at Module.tryParse (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10462:25) at Module.setSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10365:24) at ModuleLoader.addModuleSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19708:20) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19764:9) at async Promise.all (index 2) at async ModuleLoader.fetchStaticDependencies (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19790:34) at async Promise.all (index 0) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19766:9) (Use node --trace-warnings ...to show where the warning was created) (node:43347) 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:43347) [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.

my configurations are:

its a web component package library by open-wc generator.

then i upgraded that to latest storybook for sass support. everything is working except build-storybook

project dependencies and dev-dependencies are:

"dependencies": { "lit-element": "^2.5.1", "lit-html": "^1.4.1", }, "devDependencies": { "@open-wc/eslint-config": "^4.3.0", "@open-wc/testing": "^2.5.33", "@storybook/addon-essentials": "^6.3.7", "@storybook/addons": "^6.3.7", "@storybook/builder-webpack5": "^6.2.9", "@storybook/manager-webpack5": "^6.2.9", "@storybook/web-components": "^6.3.7", "@types/webpack": "^5.0.0", "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "@web/dev-server": "^0.1.17", "@web/dev-server-storybook": "^0.3.5", "@web/test-runner": "^0.12.20", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^4.0.0-alpha.0", "concurrently": "^5.3.0", "css-loader": "^6.2.0", "eslint": "^7.29.0", "eslint-config-prettier": "^7.2.0", "extract-loader": "^5.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.4", "lit": "^2.0.0-rc.2", "lit-scss-loader": "^1.1.0", "prettier": "^2.2.1", "sass": "^1.38.0", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", "ts-loader": "^9.2.5", "tslib": "^2.3.0", "typescript": "^4.3.5", "webpack": "^5.51.1", "webpack-cli": "^4.8.0" },

and main.js is:

`const path = require('path');

module.exports = { stories: [ '../stories/.stories.mdx', '../stories/.stories.@(js|jsx|ts|tsx)', ], addons: [ path.resolve('./.storybook/my-preset'), '@storybook/addon-essentials', ], core: { builder: 'webpack5', }, }; `

and my-preset is:

`const path = require('path');

module.exports = { managerWebpack: async (config, options) => { // update config here return config; }, managerBabel: async (config, options) => { // update config here return config; }, webpackFinal: async (config, { configType }) => { // configType has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. // 'PRODUCTION' is used when building the static version of storybook.
// Make whatever fine-grained changes you need

config.module.rules.push({
  test: /\.scss$/,
  use: ['lit-scss-loader', 'extract-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});
return config;
}, babel: async (config, options) => { return config; }, }; `

REPO is: https://github.com/vikashruhilgit/UI/

Any updates? I encountered the same issue.

phated closed this as completed Feb 12, 2021

shilman added configuration babel / webpack question / support labels Feb 13, 2021

Hypnosphi reopened this Feb 28, 2021

shilman added bug P0 builder-webpack5 and removed question / support labels Mar 1, 2021

shilman added the has workaround label Mar 1, 2021

nickovchinnikov mentioned this issue Mar 2, 2021

Update webpack to 5.x nickovchinnikov/react-js-tutorial#73

Merged

JamieB-gu mentioned this issue Mar 4, 2021

Webpack 5 And Working Storybook guardian/apps-rendering#1215

Closed

shilman mentioned this issue Mar 4, 2021

Webpack v5 Upgrade - build-storybook fails #14130

Closed

JamieB-gu mentioned this issue Mar 9, 2021

Webpack 5 upgrade - ts-loader module build fails on storybook run #14170

Closed

Hypnosphi mentioned this issue Apr 15, 2021

chore(deps): bump webpack from 5.31.2 to 5.32.0 JetBrains/ring-ui#3365

Closed

kirushenski mentioned this issue Apr 16, 2021

[Storybook] useStaticQuery fetching fails when used inside stories gatsbyjs/gatsby#26099

Closed

milosrs mentioned this issue Apr 27, 2021

npx sb init does not work with NPM v7 #12983

Closed

milosrs mentioned this issue Apr 27, 2021

Cannot start Storybook after migrating to Webpack 5 #14733

Closed

shilman mentioned this issue May 13, 2021

Angular 12 Support #14909

Closed

This was referenced Jun 1, 2021

Webpack v5 upgrade grommet/grommet#5289

Closed

Upgrade webpack devDependencies to ^5.37 grommet/grommet#5250

Closed

tschaffter mentioned this issue Jul 7, 2021

Update dependencies Sage-Bionetworks/sage-angular#34

Merged

georgefst mentioned this issue May 31, 2022

feat: Add a tree-rendering component using React Flow hackworthltd/primer-app#339

Merged

shilman removed the P0 label Oct 18, 2022

Webpack v5 Upgrade - start-storybook works but build-storybook fails #13893

Webpack v5 Upgrade - start-storybook works but build-storybook fails #13893

Comments

lanesawyer commented Feb 12, 2021

phated commented Feb 12, 2021

Hypnosphi commented Feb 26, 2021

shilman commented Mar 1, 2021

Hypnosphi commented Mar 1, 2021

marjisound commented Mar 4, 2021

shilman commented Mar 4, 2021

jessevanassen commented Mar 5, 2021

shilman commented Mar 5, 2021 • edited

riovir commented Mar 5, 2021 • edited

shilman commented Mar 6, 2021

marjisound commented Mar 8, 2021 • edited

martynd commented Mar 8, 2021

PascalPixel commented Apr 6, 2021

daviddelusenet commented Apr 6, 2021 • edited

daviddelusenet commented Apr 8, 2021 • edited

cascornelissen commented Apr 8, 2021 • edited

shimorojune commented Apr 10, 2021

jsdw commented Apr 15, 2021

LeoRosse commented Apr 27, 2021

SimTheFool commented Apr 27, 2021

milosrs commented Apr 28, 2021

LeoRosse commented Apr 28, 2021

milosrs commented Apr 28, 2021 • edited

SimTheFool commented Apr 29, 2021

LeoRosse commented Apr 29, 2021

milosrs commented Apr 30, 2021

SimTheFool commented Apr 30, 2021

LeoRosse commented Apr 30, 2021

milosrs commented May 5, 2021

mdobroggg commented May 21, 2021

Angry-Sparrow commented May 24, 2021

vikashruhilgit commented Aug 20, 2021

start-storybook works but build-storybook fails

tylerexmg commented Mar 8, 2022

AntonyF-Andreani commented Mar 14, 2022

fexxdev commented Aug 2, 2022

bzh2610 commented Nov 9, 2022

hsuehic commented Mar 15, 2023

start-storybook works but build-storybook fails

Webpack v5 Upgrade - `start-storybook` works but `build-storybook` fails #13893

Webpack v5 Upgrade - `start-storybook` works but `build-storybook` fails #13893

shilman commented Mar 5, 2021 •

edited

riovir commented Mar 5, 2021 •

edited

marjisound commented Mar 8, 2021 •

edited

daviddelusenet commented Apr 6, 2021 •

edited

daviddelusenet commented Apr 8, 2021 •

edited

cascornelissen commented Apr 8, 2021 •

edited

milosrs commented Apr 28, 2021 •

edited