Storybook TypeError: The 'compilation' argument must be an instance of Compilation on a new project

Current Behavior

I just create a new project, install angular and storybook and then I run storybook command yarn nx run nx-ui:storybook.

I got an error:

TypeError: The 'compilation' argument must be an instance of Compilation

Expected Behavior

It should open the storybook dashboard.

Steps to Reproduce

The clone way:

git clone https://github.com/wizardnet972/nx-story-compilation.git
yarn
yarn nx run nx-ui:storybook

* maybe the yarn.lock have calls to my proxy (it's just a verdaccio manager) so in this case you should delete yarn.lock and run yarn.

OR run those commands:

npx create-nx-workspace nx-story-compilation --preset apps --packageManager yarn --nx-cloud false

cd nx-story-compilation

yarn add @nrwl/angular @nrwl/node

yarn nx g @nrwl/node:app nx-api

yarn nx g @nrwl/angular:app nx-ui --style scss --routing --backendProject nx-api

yarn add -D @nrwl/storybook

yarn nx g @nrwl/angular:storybook-configuration nx-ui --configureCypress false --generateStories true --generateCypressSpecs false

yarn nx g @nrwl/angular:stories nx-ui --generateCypressSpecs false 

yarn nx run nx-ui:storybook

Failure Logs

> nx run nx-ui:storybook
info => Loading presets
(node:78370) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/wizardnet972/code/nx-story-compilation/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular browser target options from "nx-api:build"
info => Using angular project with "tsConfig:/Users/wizardnet972/code/nx-story-compilation/apps/nx-ui/.storybook/tsconfig.json"
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
/Users/wizardnet972/code/nx-story-compilation/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141
			throw new TypeError(
			      ^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/wizardnet972/code/nx-story-compilation/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10)
    at SourceMapDevToolModuleOptionsPlugin.apply (/Users/wizardnet972/code/nx-story-compilation/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/SourceMapDevToolModuleOptionsPlugin.js:50:27)
    at /Users/wizardnet972/code/nx-story-compilation/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/SourceMapDevToolPlugin.js:163:53
    at Hook.eval [as call] (eval at create (/Users/wizardnet972/code/nx-story-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:293:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/wizardnet972/code/nx-story-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/wizardnet972/code/nx-story-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1055:26)
    at /Users/wizardnet972/code/nx-story-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/Users/wizardnet972/code/nx-story-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
    at eval (eval at create (/Users/wizardnet972/code/nx-story-compilation/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:35:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

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

>  NX   ERROR  Running target "nx-ui:storybook" failed

  Failed tasks:

  - nx-ui:storybook

  Hint: run the command with --verbose for more details.

error Command failed with exit code 1.

Environment

>  NX  Report complete - copy this into the issue template

  Node : 16.13.0
  OS   : darwin arm64
  yarn : 1.22.11

  nx : 13.4.4
  @nrwl/angular : 13.4.4
  @nrwl/cli : 13.4.4
  @nrwl/cypress : 13.4.4
  @nrwl/devkit : 13.4.4
  @nrwl/eslint-plugin-nx : 13.4.4
  @nrwl/express : undefined
  @nrwl/jest : 13.4.4
  @nrwl/linter : 13.4.4
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : 13.4.4
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.4.4
  @nrwl/web : undefined
  @nrwl/workspace : 13.4.4
  @nrwl/storybook : 13.4.4
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
  	 @angular/animations: 13.1.2
  	 @angular/common: 13.1.2
  	 @angular/compiler: 13.1.2
  	 @angular/core: 13.1.2
  	 @angular/forms: 13.1.2
  	 @angular/platform-browser: 13.1.2
  	 @angular/platform-browser-dynamic: 13.1.2
  	 @angular/router: 13.1.2
  	 @angular-devkit/build-angular: 13.1.3
  	 @angular/cli: 13.1.3
  	 @angular/compiler-cli: 13.1.2
  	 @angular/language-service: 13.1.2
  	 @storybook/angular: 6.4.12

[mandarini]

Yes, running

nx storybook nx-ui --projectBuildConfig=nx-ui

fixes the issue!

This is on a new Nx workspace, following the exact steps that @wizardnet972 suggested. I assume that in new workspaces, the versions will match.

[mandarini]

Hi there @wizardnet972 ! Thanks for filing an issue, I can reproduce this 😃

@rfprod thanks for providing a fix so quickly!! I can verify that adding

"resolutions": {
    "webpack": "5.66.0"
}

on my package.json fixes the issue! @wizardnet972 can you try that?

I’ll make sure we push a fix for that! 😃