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

[notflorian]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: webpack v4.41.6

Description

After the migration of webpack v4.41.6 to v5.37.0 our build fail with to following error An error occurred during the build: TypeError: The 'compilation' argument must be an instance of Compilation

🔬 Minimal Reproduction

Github repository: https://github.com/KelkooGroup/theGardener/blob/feature/update-angular-12/frontend/package.json
Failing Github CI build: https://github.com/KelkooGroup/theGardener/runs/2576502917

Failling command: ng build

🔥 Exception or Error

An error occurred during the build:
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/home/runner/work/theGardener/theGardener/frontend/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
    at /home/runner/work/theGardener/theGardener/frontend/node_modules/terser-webpack-plugin/dist/index.js:566:67
    at _next43 (eval at create (/home/runner/work/theGardener/theGardener/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), :40:1)
    at _next21 (eval at create (/home/runner/work/theGardener/theGardener/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), :97:1)
    at Hook.eval [as call] (eval at create (/home/runner/work/theGardener/theGardener/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), :143:1)
    at Hook.CALL_DELEGATE [as _call] (/home/runner/work/theGardener/theGardener/frontend/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/runner/work/theGardener/theGardener/frontend/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1031:26)
    at /home/runner/work/theGardener/theGardener/frontend/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (/home/runner/work/theGardener/theGardener/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/runner/work/theGardener/theGardener/frontend/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/home/runner/work/theGardener/theGardener/frontend/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:1068:28)
    at /home/runner/work/theGardener/theGardener/frontend/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:496:12
    at Compiler.readRecords (/home/runner/work/theGardener/theGardener/frontend/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:908:11)
    at /home/runner/work/theGardener/theGardener/frontend/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:493:11
    at Hook.eval [as callAsync] (eval at create (/home/runner/work/theGardener/theGardener/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/runner/work/theGardener/theGardener/frontend/node_modules/tapable/lib/Hook.js:18:14)
An unhandled exception occurred: The 'compilation' argument must be an instance of Compilation

🌍 Your Environment

Angular CLI: 12.0.0
Node: 14.15.4
Package Manager: npm 6.14.10
OS: linux x64

Angular: 12.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         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
@schematics/angular             12.0.0
rxjs                            7.0.1
typescript                      4.2.4
webpack                         5.37.0

npm ls webpack
frontend@0.0.0 /home/fauvarqf/work/Common/theGardener/frontend
├─┬ @angular-devkit/build-angular@12.0.0
│ └── webpack@5.36.2
└── webpack@5.37.0

Anything else relevant?

I first opened an issue in the webpack repository but they closed it and told me to open it here: webpack/webpack#13380

[janousek]

@notflorian I had exactly the same problem. The problem was that angular cli packages has strict dependency on webpack 5.36.2:

angular-cli/packages/angular_devkit/build_webpack/package.json

Line 16 in eee0955

"webpack": "5.36.2"

angular-cli/packages/angular_devkit/build_angular/package.json

Line 71 in eee0955

"webpack": "5.36.2",

etc..

But you request version 5.37.0 in your package.config. Installation of 5.36.2 fixed the problem.
The reason is that npm installed two versions of webpack and there is some "mishmash" in usage of these versions.

[notflorian]

Thanks it works.

Indeed this was a bug in angular CLI with webpack 5.37.0, fixed by this commit: 56b348d

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}