storybook: [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

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 12
  • Comments: 26 (7 by maintainers)

Commits related to this issue

Most upvoted comments

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

+44
thutinavaneethreddy on Jun 17, 2021

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! 🎉

+44
matttk on Apr 13, 2021

Maybe my problem looks the same but is different…

image

@matttk It looks like you have similar issue what explained here: https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#gistcomment-3704208

Mainly what solved the issue on my end is installing "dotenv-webpack": "^7.0.2" as npm install -D dotenv-webpack.

This SO answer gave me the idea, also see the reason for that here: https://github.com/storybookjs/storybook/issues/14403#issuecomment-814209504

+17
norbitrial on Apr 13, 2021

I have a solid repro case now, thank you for your debugging info!

# From an empty directory
npm init -y
npm install react{,-dom}@16
npm install -D @storybook/{addon-essentials,builder-webpack5,react}@6.2.4
mkdir .storybook
echo "module.exports = { core: { builder: 'webpack5' } };" > .storybook/main.js
npx start-storybook

Not sure if this is related to my problems, but I can reproduce errors with 6.2.9:

10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ ｢wdm｣: wait until bundle finished: 
10% building 0/4 entries 4/9 dependencies 0/2 modulesThough the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
99% done plugins webpack-hot-middlewarewebpack built preview fd4cf7189f14ad0f287d in 14285ms
ModuleNotFoundError: Module not found: Error: Can't resolve 'lodash/get' in '/Users/blaine.bell/code/storybookTest/node_modules/telejson/dist'
Did you mean 'get.js'?
BREAKING CHANGE: The request 'lodash/get' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
    at factory.create (/Users/blaine.bell/code/storybookTest/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:1765:28)
    at hooks.factorize.callAsync (/Users/blaine.bell/code/storybookTest/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:730:13)
    at eval (eval at create (/Users/blaine.bell/code/storybookTest/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at hooks.resolve.callAsync (/Users/blaine.bell/code/storybookTest/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:273:22)
    at eval (eval at create (/Users/blaine.bell/code/storybookTest/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <an
+13
blainebell on May 17, 2021

I have a solid repro case now, thank you for your debugging info!

# From an empty directory
npm init -y
npm install react{,-dom}@16
npm install -D @storybook/{addon-essentials,builder-webpack5,react}@6.2.4
mkdir .storybook
echo "module.exports = { core: { builder: 'webpack5' } };" > .storybook/main.js
npx start-storybook
+6
tessro on Apr 7, 2021

FYI: We have a monorepo. We only use WebPack for Storybook but for reasons I also included yarn why output.

Validation that 6.2.4 is installed:

yarn why v1.22.10
[1/4] Why do we have the module "@storybook/core"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@storybook/core@6.2.4"

node_modules/webpack/package.json => 5.30.0

yarn why:

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@4.46.0"
info Has been hoisted to "webpack"
info Reasons this module exists
   - "workspace-aggregator-35efa460-4ea1-4972-b979-03b15ae8b181" depends on it
   - Hoisted from "_project_#@xx#components#@storybook#react#webpack"
   - Hoisted from "_project_#@xx#components#@storybook#addon-docs#@storybook#builder-webpack4#webpack"
   - Hoisted from "_project_#@xx#components#@storybook#builder-webpack5#@storybook#core-common#webpack"
   - Hoisted from "_project_#@xx#components#@storybook#addon-docs#@storybook#core#@storybook#core-server#webpack"
info Disk size without dependencies: "8.59MB"
info Disk size with unique dependencies: "21.98MB"
info Disk size with transitive dependencies: "46.59MB"
info Number of shared dependencies: 183
=> Found "@storybook/builder-webpack5#webpack@5.30.0"
info This module exists because "_project_#@xx#components#@storybook#builder-webpack5" depends on it.
Done in 7.70s.

node_modules/dotenv-webpack/package.json => 6.0.4

yarn why v1.22.10
[1/4] Why do we have the module "dotenv-webpack"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "dotenv-webpack@6.0.4"
info Reasons this module exists
   - "_project_#@xx#components#@storybook#builder-webpack5" depends on it
   - Hoisted from "_project_#@xx#components#@storybook#builder-webpack5#dotenv-webpack"
   - Hoisted from "_project_#@xx#components#@storybook#addon-docs#@storybook#builder-webpack4#dotenv-webpack"
   - Hoisted from "_project_#@xx#components#@storybook#addon-docs#@storybook#core#@storybook#core-server#dotenv-webpack"
info Disk size without dependencies: "48KB"
info Disk size with unique dependencies: "76KB"
info Disk size with transitive dependencies: "144KB"
info Number of shared dependencies: 2
Done in 4.28s.

If you need more info, let me know 😃

+4
dunklesToast on Apr 7, 2021

Didn’t help, unfortunately. I never had a storybook-static folder because I never run build-storybook. I only use npm run storybook.

Maybe my problem looks the same but is different…

image

+3
matttk on Apr 13, 2021

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.5 containing PR #14501 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Closing this issue. Please re-open if you think there’s still more to do.

+3
shilman on Apr 7, 2021

#14576 will probably solve this

+2
jsg2021 on Apr 14, 2021

Maybe my problem looks the same but is different… image

@matttk It looks like you have similar issue what explained here: https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#gistcomment-3704208

Mainly what solved the issue on my end is installing "dotenv-webpack": "^7.0.2" as npm install -D dotenv-webpack.

This SO answer gave me the idea, also see the reason for that here: #14403 (comment)

This one saved me! I upgraded some “inherited” repos and was struggling with this issue. Thanks!

+1
webbugt on Nov 25, 2021
Read more comments on GitHub
← storybook: Webpack5 Builder - Stories cannot be explicitly sorted
storybook: Webpack.IgnorePlugin() Error with Webpack 5 and React < 18 →