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

See original GitHub issue

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?

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:21 (1 by maintainers)

Top GitHub Comments

6reactions

BrandonClappcommented, May 20, 2021

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

2reactions

alan-agius4commented, May 25, 2021

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

Top Results From Across the Web

The 'compilation' argument must be an instance of Compilation

The command I'm running is ng build . My angular.json is as follows: { "$schema": "./node_modules/@angular/cli/ ...

Webpack 5: The 'compilation' argument must be an ... - GitHub

TypeError: The 'compilation ' argument must be an instance of Compilation - JavascriptModulesPlugin.js:116 Function.

[webpack-cli] TypeError: The 'compilation' argument must be ...

When i run npm run dev i get this error: Copy Code [webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation....

Fixing the "'compilation' argument must be an instance of ...

The fix is simply to get all of your packages to use the same webpack version. To see what your project is using,...

Webpack v5 Upgrade - `start-storybook` works but ... - Issuehunt

Thanks @shilman We actually managed to fix the TypeError: The 'compilation' argument must be an instance of Compilation issue for build-storybook by ...