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

Upgrading from angular 11.2 to angular 12 and trying ng build / ng serve causes this error.

Is this a regression?

yes. Used to build in previous version.

Description

A clear and concise description of the problem...

Minimal Reproduction

https://stackblitz.com/...

Exception or Error


TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/me/my-proj/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
    at /Users/me/my-proj/node_modules/terser-webpack-plugin/dist/index.js:566:67
    at _next43 (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:77:1)
    at _next21 (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:189:1)
    at Hook.eval [as call] (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:279:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/me/my-proj/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1031:26)
    at /Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/me/my-proj/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
    at /Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:496:12
    at Compiler.readRecords (/Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:908:11)
    at /Users/me/my-proj/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:493:11
    at Hook.eval [as callAsync] (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/me/my-proj/node_modules/tapable/lib/Hook.js:18:14)
An unhandled exception occurred: The 'compilation' argument must be an instance of Compilation
See "/private/var/folders/99/y2bb165n66q99tqwsv7bpt600000gn/T/ng-GPq9IO/angular-errors.log" for further details.

Your Environment

Angular Version:


@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@nguniversal/builders           12.0.0
@nguniversal/express-engine     12.0.0
@schematics/angular             12.0.0
rxjs                            7.0.0
typescript                      4.2.4

Anything else relevant?

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 21 (1 by maintainers)

Commits related to this issue

deps(web-client): work around bug with @angular-devkit/build-angular 12.0.4+ @angular-devkit/build-angular 12.0.4+ makes build-storybook hang. Constraining it to 12.0.3 avoids the hang. Upstream is... — committed to ntls-io/nautilus-wallet by PiDelport 3 years ago
deps(web-client): work around bug with @angular-devkit/build-angular 12.0.4+ @angular-devkit/build-angular 12.0.4+ makes build-storybook hang. Constraining it to 12.0.3 avoids the hang. Upstream is... — committed to ntls-io/nautilus-wallet by PiDelport 3 years ago

Most upvoted comments

I was having this same issue in my nx workspace and finally figured it out.

I was hoping that nx would handle upgrading/removing the webpack dependencies, but it did not. Coming from previous version of angular, we’ve had webpack as a direct dev dependency inside of our package.json.

npm ls webpack was giving me unmet peer dependencies on @angular-devkit/build-angular@12.0.1.

I read in another issue (https://github.com/angular/angular-cli/issues/20786#issuecomment-841027807) that webpack doesn’t need to be installed directly, because it’s a dependency of the @angular-devkit/build-angular

Steps that fixed it for me:

Remove webpack as a direct devDependency in package.json (not needed anymore)
Deleted node_modules & package.lock.json
npm install

BrandonClapp on May 20, 2021

Closing as this doesn’t appear to be caused by the Angular CLI.

alan-agius4 on May 25, 2021

I was experiencing the same error. While we use webpack directly for some projects in our monorepo (so can’t/shouldn’t remove the explicit webpack dependency), we had a resolutions block in our package.json which was originally put there to use webpack 5 with Angular 11:

  "resolutions": {
    "webpack": "^5.0.0"
  },

Thanks to the pointers from @alan-agius4 and others, I found that removing this block, and deleting yarn.lock and node_modules then running yarn fixes the problem.

johncrim on Jun 7, 2021

If npm install --legacy-peer-deps resolves the problem, then the issue’s root cause could likely be a defect in npm 7. From the npm ls output above, there is a valid version of Webpack (5.36.2) available that could be used to satisfy the sibling peer dependencies. However, npm 7 appears to be choosing to ignore that already installed instance and use a different version (5.37.0) to satisfy those peer dependencies. There have been several critical peer dependency versioning defects corrected in recent versions of npm 7. If not on the latest version of npm 7 (currently: 7.13.0), please try upgrading. If this issue is occurring with the latest version of npm 7, that would be useful information as well.

clydin on May 15, 2021

This isn’t an issue for me anymore.

What I did:

Deleted the specific reference I had to webpack from package.json (I had this there because I was using webpack 5 with Angular 11 so I could start using module-federation. I’m converting an existing application to use a micro-front end architecture)
Deleted package-lock.json
Ran npm install
Ran ng update @angular/core @12 @angular/cli @12

Once I did the above, I no longer get the error on ng build.

careywalker on May 14, 2021