storybook: Webpack v5 Upgrade - `start-storybook` works but `build-storybook` fails

@shilman for some reason, my setup broke after updating preview to webpack@5.32.0

https://github.com/JetBrains/ring-ui/tree/dependabot/npm_and_yarn%2Fwebpack-5.32.0 npm install && npm run bootstrap && npm run build

info @storybook/html v6.2.7
info 
info => Cleaning outputDir: /Users/jetbrains/IdeaProjects/ring-ui/dist
info => Loading presets
info => Loading custom manager config
info => Compiling manager..
info => Compiling preview..
info => Loading 1 config file in "/Users/jetbrains/IdeaProjects/ring-ui/.storybook"
WARN unable to find package.json for @ungap/url-search-params
WARN unable to find package.json for postcss-font-family-system-ui
WARN unable to find package.json for merge-options
info => Adding stories defined in "/Users/jetbrains/IdeaProjects/ring-ui/.storybook/main.js"
info => Loading custom manager config
info => Using implicit CSS loaders
info => Using default Webpack5 setup
/Users/jetbrains/IdeaProjects/ring-ui/node_modules/webpack/lib/util/MapHelpers.js:17
        const value = map.get(key);
                          ^

TypeError: Cannot read property 'get' of undefined
    at exports.provide (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/webpack/lib/util/MapHelpers.js:17:20)
    at /Users/jetbrains/IdeaProjects/ring-ui/node_modules/webpack/lib/DefinePlugin.js:289:51
    at SyncHook.eval [as call] (eval at create (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/webpack/lib/Compiler.js:321:11
    at Array.<anonymous> (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/webpack/lib/Compiler.js:546:12)
    at Storage.finished (/Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/jetbrains/IdeaProjects/ring-ui/node_modules/@storybook/html/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/jetbrains/IdeaProjects/ring-ui/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)

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

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 ✌🏼

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

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;
  },
};

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.

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

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

This solved the problem for us too

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.

Same for me!

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

Hey @lanesawyer! Storybook doesn’t currently support Webpack 5. You can check out the ongoing progress in https://github.com/storybookjs/storybook/pull/13808

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

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

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

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

@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 https://github.com/storybookjs/storybook/issues/14170

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 I see. I think I’ll just extract custom-header into a separate lerna package with its own dependencies