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

[Tallyb]

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), :77:1)
    at _next21 (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:19:10), :189:1)
    at Hook.eval [as call] (eval at create (/Users/me/my-proj/node_modules/tapable/lib/HookCodeFactory.js:19:10), :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), :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), :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?

[alan-agius4]

@richie50,

Can you please provide the output of ng v and npm ls webpack?

Thanks.

[Tallyb]

│ ├─┬ @angular-devkit/build-optimizer@0.1200.0
│ │ └── webpack@5.37.0 deduped
│ ├─┬ @angular-devkit/build-webpack@0.1200.0
│ │ └── webpack@5.37.0 deduped
│ ├─┬ @ngtools/webpack@12.0.0
│ │ └── webpack@5.37.0 deduped
│ ├─┬ circular-dependency-plugin@5.2.2
│ │ └── webpack@5.37.0 deduped
│ ├─┬ copy-webpack-plugin@8.1.1
│ │ └── webpack@5.37.0 deduped
│ ├─┬ css-loader@5.2.4
│ │ └── webpack@5.37.0 deduped
│ ├─┬ less-loader@8.1.1
│ │ └── webpack@5.37.0 deduped
│ ├─┬ mini-css-extract-plugin@1.5.1
│ │ └── webpack@5.37.0 deduped
│ ├─┬ postcss-loader@5.2.0
│ │ └── webpack@5.37.0 deduped
│ ├─┬ raw-loader@4.0.2
│ │ └── webpack@5.37.0 deduped
│ ├─┬ sass-loader@11.0.1
│ │ └── webpack@5.36.2 deduped
│ ├─┬ source-map-loader@2.0.1
│ │ └── webpack@5.37.0 deduped
│ ├─┬ style-loader@2.0.0
│ │ └── webpack@5.37.0 deduped
│ ├─┬ stylus-loader@5.0.0
│ │ └── webpack@5.37.0 deduped
│ ├─┬ terser-webpack-plugin@4.2.3
│ │ └── webpack@5.37.0 deduped
│ ├─┬ webpack-dev-middleware@4.1.0
│ │ └── webpack@5.37.0 deduped
│ ├─┬ webpack-dev-server@3.11.2
│ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ └── webpack@5.37.0 deduped
│ │ └── webpack@5.37.0 deduped
│ ├─┬ webpack-subresource-integrity@1.5.2
│ │ ├─┬ html-webpack-plugin@4.5.2
│ │ │ └── webpack@5.37.0 deduped
│ │ └── webpack@5.37.0 deduped
│ └─┬ webpack@5.36.2
│   └─┬ terser-webpack-plugin@5.1.2
│     └── webpack@5.36.2 deduped
├─┬ @storybook/addon-docs@6.2.9
│ ├─┬ @storybook/builder-webpack4@6.2.9
│ │ ├─┬ css-loader@3.6.0
│ │ │ └── webpack@4.46.0 deduped
│ │ ├─┬ dotenv-webpack@1.8.0
│ │ │ └── webpack@4.46.0 deduped
│ │ ├─┬ postcss-loader@4.2.0
│ │ │ └── webpack@4.46.0 deduped
│ │ ├─┬ style-loader@1.3.0
│ │ │ └── webpack@4.46.0 deduped
│ │ ├─┬ terser-webpack-plugin@3.1.0
│ │ │ └── webpack@4.46.0 deduped
│ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ └── webpack@4.46.0 deduped
│ │ ├─┬ webpack-filter-warnings-plugin@1.2.1
│ │ │ └── webpack@4.46.0 deduped
│ │ └─┬ webpack@4.46.0
│ │   └─┬ terser-webpack-plugin@1.4.5
│ │     └── webpack@4.46.0 deduped
│ └─┬ webpack@5.37.0
│   └─┬ terser-webpack-plugin@5.1.2
│     └── webpack@5.37.0 deduped
├─┬ @storybook/addon-essentials@6.2.9
│ └── webpack@5.37.0 deduped
├─┬ @storybook/angular@6.2.9
│ ├─┬ @storybook/core-common@6.2.9
│ │ └─┬ webpack@4.46.0
│ │   └─┬ terser-webpack-plugin@1.4.5
│ │     └── webpack@4.46.0 deduped
│ ├─┬ postcss-loader@4.2.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ sass-loader@10.2.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ ts-loader@8.2.0
│ │ └── webpack@4.46.0 deduped
│ └─┬ webpack@4.46.0
│   └─┬ terser-webpack-plugin@1.4.5
│     └── webpack@4.46.0 deduped
├─┬ @storybook/builder-webpack5@6.2.9
│ ├─┬ dotenv-webpack@6.0.4
│ │ └── webpack@5.37.0 deduped
│ ├─┬ file-loader@6.2.0
│ │ └── webpack@5.37.0 deduped
│ ├─┬ html-webpack-plugin@5.3.1
│ │ └── webpack@5.37.0 deduped
│ ├─┬ terser-webpack-plugin@5.1.2
│ │ └── webpack@5.37.0 deduped
│ ├─┬ url-loader@4.1.1
│ │ └── webpack@5.37.0 deduped
│ └── webpack@5.37.0 deduped
├─┬ @storybook/core@6.2.9
│ ├─┬ @storybook/core-client@6.2.9
│ │ └── webpack@5.37.0 deduped
│ └─┬ @storybook/core-server@6.2.9
│   ├─┬ css-loader@3.6.0
│   │ └── webpack@4.46.0 deduped
│   ├─┬ dotenv-webpack@1.8.0
│   │ └── webpack@4.46.0 deduped
│   ├─┬ style-loader@1.3.0
│   │ └── webpack@4.46.0 deduped
│   ├─┬ terser-webpack-plugin@3.1.0
│   │ └── webpack@4.46.0 deduped
│   ├─┬ webpack-dev-middleware@3.7.3
│   │ └── webpack@4.46.0 deduped
│   └─┬ webpack@4.46.0
│     └─┬ terser-webpack-plugin@1.4.5
│       └── webpack@4.46.0 deduped
├─┬ @storybook/html@6.2.9
│ └─┬ html-loader@1.3.2
│   └── webpack@5.37.0 deduped
├─┬ @storybook/preset-scss@1.0.3
│ └─┬ sass-loader@11.1.0
│   └── webpack@5.37.0 deduped
├─┬ babel-loader@8.2.2
│ └── webpack@5.37.0 deduped
└─┬ pdfjs-dist@2.8.335
  └─┬ worker-loader@3.0.8
    └── webpack@5.37.0 deduped

[Tallyb]

You have webpack installed more than once.

npm i --save-dev webpack@5.36

with terser being a dep of webpack AND having webpack as a dependency, I do not think it can be avoided.

[zehavibarak]

Install terser directly

[Tallyb]

@zehavibarak thank you for your attempt to help. can you explain a bit what do you think the issue is and how this will solve it?

[zehavibarak]

You have more than one webpack version. Install latest terser and make sure to install webpack of a version that matches the inner version.

[zehavibarak]

bash

npm i --save-dev sass-loader terser-webpack-plugin css-loader webpack-dev-middleware style-loader dotenv-webpack ts-loader sass-loader

and verify webpack is of 5.37

[alan-agius4]

Webpack is a direct dependency of @angular-devkit/build-angular and it should not be added as a direct dependency in your project unless you use Webpack directly.

Probably, something went wrong during module hoisting, can you please try the below;

rm -rf node_modules package-lock.json
npm i 

NB: please revert any changes suggested above by @zehavibarak. This will most certainly cause your project to be in a broken state.

[zehavibarak]

It may align all versions, worth at least a try. There is that other bug you avoid. The one you closed without resolving

[careywalker]

I am having this issue as well. The webpack version alignment didn't work. I'll try the below to see if that helps:

rm -rf node_modules package-lock.json
npm i

[zehavibarak]

@careywalker share your npm ls webpack

[careywalker]

This isn't an issue for me anymore.

What I did:

1. 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)
2. Deleted package-lock.json
3. Ran npm install
4. Ran ng update @angular/core@12 @angular/cli@12

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

[mshima]

The error happens when there are 2 versions of webpack in the dependency tree. eg webpack@5.37.0 and webpack@5.36.2.
@angular-devkit/build-angular@12.0.0 has a transient dependency on webpack@5.36.2 and will fail when webpack@!=5.36.2 is in @angular-devkit/build-webpack tree.

There are no safeguards for this problem.
IMO:

• @angular-devkit/build-angular should add a peer dependency on webpack@5.36.2.
• @angular/angular-cli should add a peer dependency on @angular-devkit/build-angular.

This will force webpack@5.36.2 to be deduped at the root of the project.

To workaround the problem:

• Add dependency on webpack@5.36.2 or remove webpack from dependency and recreate node_modules/package-lock
• Don't use npm install --force (not deduping right), use npm install --legacy-peer-deps instead.