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

wizardnet972 · 2022-01-14T17:43:00Z

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

The text was updated successfully, but these errors were encountered:

rfprod · 2022-01-16T08:48:33Z

@mandarini Seems like it's the webpack versions conflict. I've had the same issue during project dependencies update, and have just solved it.

Check this PR

chore(deps): bump project dependencies rfprod/nx-ng-starter#357

I have updated all project dependencies to the latest versions except @storybook which is still 6.5.0-alpha.7.
I am testing if the workspace won't be broken if I use @storybook 6.5.0-alpha.17.

The solution that made storybook compile - https://github.com/rfprod/nx-ng-starter/pull/357/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R130

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

Commit ref rfprod/nx-ng-starter@6d89609 ("webpack-dev-server": "4.7.3" works, I forgot to roll it back from 4.7.2 after several experiments with dependencies)
Premerge pipeline https://github.com/rfprod/nx-ng-starter/runs/4831273375?check_suite_focus=true - see the Build storybook step. It's at the bottom, right before the Post Workspace Cache step.

PS: While I was writing this message, my lovely computer verified that @storybook 6.5.0-alpha.17 does not break anything. I will bump its version as well in my project.

mandarini · 2022-01-17T10:02:03Z

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! :)

mandarini · 2022-01-17T10:38:55Z

Oh, wait, I think just setting the projectBuildConfig flag fixes the error. Can you please verify @wizardnet972 @rfprod ?

rfprod · 2022-01-17T10:40:23Z

@mandarini regarding my solution, maybe I should have mentioned that the webpack version should match the webpack version used by angular-devkit, i.e. this resolution may need to be updated according to the webpack version used by angular-devkit.

If you plan to add this resolution to nrwl libs, won't it lead to worse consequences in future during updates?
Or do you plan to add this resolution to the package.json on the workspace level when a new nrwl workspace is created?

Oh, wait, I think just setting the projectBuildConfig flag fixes the error. Can you please verify @wizardnet972 @rfprod ?

I will try it in a minute. It will take some time to reinstall project dependencies without the webpack resolution config.

mandarini · 2022-01-17T10:42:42Z

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.

rfprod · 2022-01-17T10:53:46Z

@mandarini projectBuildConfig did not work in my project, but it is not new, so it's irrelevant to this issue.
I have projectBuildConfig set in angular.json https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1204
nx run documentation:build-storybook --projectBuildConfig=documentation - this did not work as well, I tried.

mandarini · 2022-01-17T12:54:34Z

@rfprod but it gets fixed when you do your solution? aligning the webpack versions etc?

rfprod · 2022-01-17T12:57:48Z

@mandarini yep, it does. The premerge pipeline validates each code change, and it does storybook test build. I've merge several PRs since introducing the fix. I believe only webpack version resolution fixes the issue in my case.

dudek-igor · 2023-01-25T10:55:27Z

Hello everyone
the bug was created by diffrent webpack version in one project.
For me, using npm install --legacy-peer-deps solved the problem!

Looking forward for storybook v7 !

mandarini · 2023-01-25T11:09:07Z

You can already try out SB7 with Nx, you know!! :D :D ---> https://nx.dev/packages/storybook/documents/storybook-7-setup

github-actions · 2023-03-21T00:18:53Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

wizardnet972 added the type: bug label Jan 14, 2022

FrozenPandaz added the scope: storybook Issues related to Storybook support in Nx label Jan 15, 2022

mandarini self-assigned this Jan 15, 2022

rfprod mentioned this issue Jan 17, 2022

Storybook 6.4 build failing with Angular 13.1 storybookjs/storybook#16977

Closed

mandarini linked a pull request Jan 17, 2022 that will close this issue

fix(storybook): handle defaultProject issues with projectBuildConfig flag #8494

Merged

mandarini closed this as completed in #8494 Jan 17, 2022

github-actions bot added the outdated label Mar 21, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

wizardnet972 commented Jan 14, 2022

rfprod commented Jan 16, 2022 •

edited

mandarini commented Jan 17, 2022 •

edited

mandarini commented Jan 17, 2022

rfprod commented Jan 17, 2022 •

edited

mandarini commented Jan 17, 2022

rfprod commented Jan 17, 2022 •

edited

mandarini commented Jan 17, 2022

rfprod commented Jan 17, 2022 •

edited

dudek-igor commented Jan 25, 2023

mandarini commented Jan 25, 2023 •

edited

github-actions bot commented Mar 21, 2023

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

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

Comments

wizardnet972 commented Jan 14, 2022

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

rfprod commented Jan 16, 2022 • edited

mandarini commented Jan 17, 2022 • edited

mandarini commented Jan 17, 2022

rfprod commented Jan 17, 2022 • edited

mandarini commented Jan 17, 2022

rfprod commented Jan 17, 2022 • edited

mandarini commented Jan 17, 2022

rfprod commented Jan 17, 2022 • edited

dudek-igor commented Jan 25, 2023

mandarini commented Jan 25, 2023 • edited

github-actions bot commented Mar 21, 2023

rfprod commented Jan 16, 2022 •

edited

mandarini commented Jan 17, 2022 •

edited

rfprod commented Jan 17, 2022 •

edited

rfprod commented Jan 17, 2022 •

edited

rfprod commented Jan 17, 2022 •

edited

mandarini commented Jan 25, 2023 •

edited