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

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® Core™ 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

[Hypnosphi]

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

[LeoRosse]

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