[webpack5] DefinePlugin cannot read property 'get' of undefined

Describe the bug I cannot build storybook using webpack5. I have the following error message with storybook v6.2.4:

/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/webpack/lib/DefinePlugin.js:549
						const oldVersion = compilation.valueCacheVersions.get(name);
						                                                  ^

TypeError: Cannot read property 'get' of undefined
    at /Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/webpack/lib/DefinePlugin.js:549:57
    at Array.forEach (<anonymous>)
    at walkDefinitionsForValues (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/webpack/lib/DefinePlugin.js:545:31)
    at /Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/webpack/lib/DefinePlugin.js:571:5
    at SyncHook.eval [as call] (eval at create (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    at SyncHook.lazyCompileHook (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:77:18
    at _next0 (eval at create (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
    at eval (eval at create (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:1)
    at watchRunHook (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/webpack-virtual-modules/index.js:173:5)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/moroine/Workspace/Nugit/nugit-visualization/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:28:1)
error Command failed with exit code 1.

I rollback to v6.2.3 and it works (it’s probably caused by dotenv-webpack upgrade.

To Reproduce

Here is my main.js (not the original but this minimal one causes the issue).

module.exports = {
  stories: [
    '../source/component/**/*.stories.jsx',
    '../src/client/**/*.stories.jsx',
  ],
  core: {
    builder: 'webpack5',
  },
};

System

Environment Info:

  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
  Binaries:
    Node: 12.18.4 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-actions: 6.2.4 => 6.2.4
    @storybook/addon-console: ^1.2.3 => 1.2.3
    @storybook/addon-essentials: 6.2.4 => 6.2.4
    @storybook/addon-knobs: 6.2.4 => 6.2.4
    @storybook/addon-links: 6.2.4 => 6.2.4
    @storybook/addon-storyshots: 6.2.4 => 6.2.4
    @storybook/addon-storysource: 6.2.4 => 6.2.4
    @storybook/addon-viewport: 6.2.4 => 6.2.4
    @storybook/builder-webpack5: 6.2.4 => 6.2.4
    @storybook/react: 6.2.4 => 6.2.4

Additional context Given the stack trace, it looks like @storybook/core-server is using webpack4 while root level is webpack5. Here is yarn why webpack

yarn why v1.22.10
[1/4] 🤔  Why do we have the module "webpack"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "webpack@5.30.0"
info Has been hoisted to "webpack"
info Reasons this module exists
   - Specified in "devDependencies"
   - Hoisted from "@storybook#builder-webpack5#webpack"
info Disk size without dependencies: "6.24MB"
info Disk size with unique dependencies: "12.6MB"
info Disk size with transitive dependencies: "24.72MB"
info Number of shared dependencies: 68
=> Found "@storybook/react#webpack@4.46.0"
info This module exists because "@storybook#react" depends on it.
info Disk size without dependencies: "2.41MB"
info Disk size with unique dependencies: "10.59MB"
info Disk size with transitive dependencies: "26.58MB"
info Number of shared dependencies: 111
=> Found "@storybook/core-common#webpack@4.46.0"
info This module exists because "@storybook#addon-storyshots#@storybook#core-common" depends on it.
info Disk size without dependencies: "2.56MB"
info Disk size with unique dependencies: "10.74MB"
info Disk size with transitive dependencies: "26.73MB"
info Number of shared dependencies: 111
=> Found "@storybook/builder-webpack4#webpack@4.46.0"
info This module exists because "@storybook#addon-essentials#@storybook#addon-docs#@storybook#builder-webpack4" depends on it.
info Disk size without dependencies: "2.78MB"
info Disk size with unique dependencies: "10.96MB"
info Disk size with transitive dependencies: "26.95MB"
info Number of shared dependencies: 111
=> Found "@storybook/core-server#webpack@4.46.0"
info This module exists because "@storybook#addon-storyshots#@storybook#core#@storybook#core-server" depends on it.
info Disk size without dependencies: "2.75MB"
info Disk size with unique dependencies: "10.93MB"
info Disk size with transitive dependencies: "26.92MB"
info Number of shared dependencies: 111
✨  Done in 1.60s.

┆Issue is synchronized with this Asana task by Unito

[matttk]

OK, I’ve been reading a lot of different threads here and it seems what solved it for me was adding dotenv-webpack to dev dependencies (6.0.4 was enough) and html-webpack-plugin. Without the second one, I was just getting a different error (about snapshots). Now I seem to have moved past this error into into some unrelated ones.

postcss wasn’t working. I followed the migration guide but this proved to not be enough. Step 3 from this post worked.

Edit: deleted last part of post - it was about an error with SCSS not being recognised but I hadn’t updated my main.js to account for changes to webpack.config.js with the webpack 5 upgrade. Nothing worth sharing here.

Storybook is running now! 🎉

[thutinavaneethreddy]

If someone is still looking around for a solution, here is what worked for me :

1. npm install webpack@5.36.2 --save-dev
2. npm install dotenv-webpack@6.0.4 --save-dev (This fixed “cannot read property ‘get’ of undefined” but gave a new issue about snapshots)
3. npm install html-webpack-plugin@5.3.1 --save-dev (This fixed snapshot issue)
4. In the build config in angular.json, change “optimization” : “false” to

“optimization”: { “styles”: false, “scripts”: false, “fonts”: false }

This fixed the warning - “Cannot read property ‘minify’ of undefined”

P.S: I followed all these steps while on storybook 6.2.7 version