TypeError: Cannot read property 'get' of undefined when starting storybook on an empty project

Current Behavior

after creating an empty angular workspace and adding storybook, you run it and get TypeError: Cannot read property ‘get’ of undefined

Expected Behavior

Storybook should start without errors

Steps to Reproduce

npx create-nx-workspace --preset=angular (“any1” as organization and project name, css and no cloud) npm i --save-dev @nrwl/storybook nx g @nrwl/angular:storybook-configuration any1 (answer “true” to all questions) nx run any1:storybook

Failure Logs

info => Loading presets info => Loading 1 config file in “D:\temp\any1\apps\any1.storybook” info => Adding stories defined in “D:\temp\any1\apps\any1.storybook\main.js” info => Found custom tsconfig.json info => Using implicit CSS loaders info => Using angular project ‘any1’ for configuring Storybook. info => Loading angular-cli config. info => Get angular-cli webpack config. info => Loading custom Webpack config (full-control mode). [webpack-dev-middleware] wait until bundle finished Starting type checking service… i ｢wdm｣: wait until bundle finished: D:\temp\any1\node_modules\webpack\lib\util\MapHelpers.js:17 const value = map.get(key); ^

TypeError: Cannot read property ‘get’ of undefined at exports.provide (D:\temp\any1\node_modules\webpack\lib\util\MapHelpers.js:17:20) at D:\temp\any1\node_modules\webpack\lib\DefinePlugin.js:290:6 at SyncHook.eval [as call] (eval at create (D:\temp\any1\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1) at SyncHook.lazyCompileHook (D:\temp\any1\node_modules\tapable\lib\Hook.js:154:20) at Compiler.newCompilation (D:\temp\any1\node_modules@storybook\core-server\node_modules\webpack\lib\Compiler.js:631:26) at D:\temp\any1\node_modules@storybook\core-server\node_modules\webpack\lib\Compiler.js:667:29 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\temp\any1\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at AsyncSeriesHook.lazyCompileHook (D:\temp\any1\node_modules\tapable\lib\Hook.js:154:20) at Compiler.compile (D:\temp\any1\node_modules@storybook\core-server\node_modules\webpack\lib\Compiler.js:662:28) at D:\temp\any1\node_modules@storybook\core-server\node_modules\webpack\lib\Watching.js:77:18 at _next0 (eval at create (D:\temp\any1\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:1) at eval (eval at create (D:\temp\any1\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:34:1) at watchRunHook (D:\temp\any1\node_modules\webpack-virtual-modules\index.js:173:5) at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\temp\any1\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:30:1) at AsyncSeriesHook.lazyCompileHook (D:\temp\any1\node_modules\tapable\lib\Hook.js:154:20) at Watching._go (D:\temp\any1\node_modules@storybook\core-server\node_modules\webpack\lib\Watching.js:41:32)

———————————————————————————————————————————————

NX ERROR Running target “any1:storybook” failed

Failed tasks:

• any1:storybook

Environment

NX Report complete - copy this into the issue template

Node : 14.16.0 OS : win32 x64 npm : 6.14.11

nx : Not Found @nrwl/angular : 12.3.6 @nrwl/cli : 12.3.6 @nrwl/cypress : 12.3.6 @nrwl/devkit : 12.3.6 @nrwl/eslint-plugin-nx : 12.3.6 @nrwl/express : Not Found @nrwl/jest : 12.3.6 @nrwl/linter : 12.3.6 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/react : Not Found @nrwl/schematics : Not Found @nrwl/tao : 12.3.6 @nrwl/web : Not Found @nrwl/workspace : 12.3.6 @nrwl/storybook : 12.3.6 @nrwl/gatsby : Not Found typescript : 4.2.4

[phbernard]

Thank you @asherccohen !

Complementing your answer, configure webpack5:

npm install --save-dev @storybook/manager-webpack5 @storybook/builder-webpack5

Then, in .storybook/main.js:

module.exports = {
  core: {
    builder: "webpack5"
  }
}

[asherccohen]

I am on those versions.

I have solved it, was going to edit my question once double checked nothing else was blocking.

Thanks for the suggestion and reminder.

Context: I am working in a nx dev monorepo and I realized that some packages were missing. So I followed the migration guide on storybook and added the missing dependencies (can’t copy/paste now, sorry, refer to the docs) as well as setting webpack 5 in storybook’s main.js file.

module.exports ={
core: {
builder: "webpack5"
 }
}

Hope this helps anyone stuck on the same issue.