Been getting this error when running 'ng build' on my Angular 12.0.2 project
./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): TypeError: The 'compilation' argument must be an instance of Compilation at getCompilationHooks (D:\Dev\Git_Merc\mercury\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:125:10) at D:\Dev\Git_Merc\mercury\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:43:19 at Hook.eval [as call] (eval at create (D:\Dev\Git_Merc\mercury\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1) at Hook.CALL_DELEGATE [as _call] (D:\Dev\Git_Merc\mercury\node_modules\tapable\lib\Hook.js:14:14) at Compiler.newCompilation (D:\Dev\Git_Merc\mercury\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1030:30) at D:\Dev\Git_Merc\mercury\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1073:29 at Hook.eval [as callAsync] (eval at create (D:\Dev\Git_Merc\mercury\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\Dev\Git_Merc\mercury\node_modules\tapable\lib\Hook.js:18:14) at Compiler.compile (D:\Dev\Git_Merc\mercury\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1068:28) at Compiler.runAsChild (D:\Dev\Git_Merc\mercury\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:520:8) I've been googling around but can't find anything that solves my issue. I'm not sure what's triggering this.
Versions:
Angular CLI: 12.0.2 Node: 14.17.0 Package Manager: npm 7.14.0 OS: win32 x64 Angular: 12.0.1 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router Package Version ----------------------------------------------------------- @angular-devkit/architect 0.1200.2 @angular-devkit/build-angular 12.0.2 @angular-devkit/build-optimizer 0.1200.2 @angular-devkit/core 12.0.2 @angular-devkit/schematics 12.0.2 @angular/cli 12.0.2 @schematics/angular 12.0.2 ng-packagr 12.0.2 rxjs 7.1.0 typescript 4.2.4 webpack 5.38.0 Update 1 - adding requested information from @Heretic Monkey
The command I'm running is ng build.
My angular.json is as follows:
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "Agent-Angular": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/Agent-Angular", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets", "src/web.config" ], "styles": [ "src/styles.scss", "node_modules/@mercury/merc-pattern-lib/styles.scss" ], "scripts": [ "node_modules/" ], "vendorChunk": true, "extractLicenses": false, "buildOptimizer": false, "sourceMap": true, "optimization": false, "namedChunks": true }, "configurations": { "local": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.local.ts" } ] }, "nonprod": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.nonprod.ts" } ] }, "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "Agent-Angular:build" }, "configurations": { "local": { "browserTarget": "Agent-Angular:build:local" }, "nonprod": { "browserTarget": "Agent-Angular:build:nonprod" }, "production": { "browserTarget": "Agent-Angular:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "Agent-Angular:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets", "src/web.config" ], "styles": [ "src/styles.scss" ], "scripts": [ "node_modules/" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json" ], "exclude": [ "**/node_modules/**" ] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "Agent-Angular:serve" }, "configurations": { "production": { "devServerTarget": "Agent-Angular:serve:production" } } } } }, "cee-ctilib": { "projectType": "library", "root": "projects/cee-ctilib", "sourceRoot": "projects/cee-ctilib/src", "prefix": "lib", "architect": { "build": { "builder": "@angular-devkit/build-angular:ng-packagr", "options": { "tsConfig": "projects/cee-ctilib/tsconfig.lib.json", "project": "projects/cee-ctilib/ng-package.json" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "projects/cee-ctilib/src/test.ts", "tsConfig": "projects/cee-ctilib/tsconfig.spec.json", "karmaConfig": "projects/cee-ctilib/karma.conf.js" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "projects/cee-ctilib/tsconfig.lib.json", "projects/cee-ctilib/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }, "entities": { "projectType": "library", "root": "projects/entities", "sourceRoot": "projects/entities/src", "prefix": "lib", "architect": { "build": { "builder": "@angular-devkit/build-angular:ng-packagr", "options": { "tsConfig": "projects/entities/tsconfig.lib.json", "project": "projects/entities/ng-package.json" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "projects/entities/src/test.ts", "tsConfig": "projects/entities/tsconfig.spec.json", "karmaConfig": "projects/entities/karma.conf.js" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "projects/entities/tsconfig.lib.json", "projects/entities/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } } }, "defaultProject": "Agent-Angular", "cli": { "analytics": false, "defaultCollection": "@ngrx/schematics" } } Update 2 - adding package.json
{ "name": "agent-angular", "version": "0.0.0", "description": "Mercury Chat Application", "scripts": { "ng": "ng", "format:src": "prettier --config ./prettier.config.js --ignore-path ./.prettierignore --write \"src/**/*.\"{ts,js,json,scss,less,css}", "format:projects": "prettier --config ./prettier.config.js --ignore-path ./.prettierignore --write \"projects/**/*.\"{ts,js,json,scss,less,css}", "format:e2e": "prettier --config ./prettier.config.js --ignore-path ./.prettierignore --write \"e2e/**/*.\"{ts,js,json,scss,less,css}", "format:root": "prettier --config ./prettier.config.js --ignore-path ./.prettierignore --write \"*.\"{ts,js,json,scss,less,css}", "format:all": "npm run format:src && npm run format:projects && npm run format:e2e && npm run format:root", "lint": "ng lint", "e2e": "ng e2e", "start": "npm run && ng serve --prod", "build": "npm run && ng build --prod --base-href=./", "build:dev": "npm run && ng build", "unit:test": "ng test", "unit:test:main": "ng test Agent-Angular --code-coverage", "unit:test:entities": "ng test entities --code-coverage", "unit:test:cee-ctilib": "ng test cee-ctilib --code-coverage", "unit:test:debug": "ng test --browsers Chrome --watch true", "unit:test:entities:debug": "ng test entities --browsers Chrome --watch true", "start:local": "ng serve -c local --host local.mercury.comcast.net --port 443 --ssl --ssl-key ./cert/local.mercury.comcast.net.key --ssl-cert ./cert/local.mercury.comcast.net.crt", "start:dev": "ng serve -c dev --host dev.mercury.comcast.net --port 443 --ssl --ssl-key ./cert/localhost.key --ssl-cert ./cert/localhost.crt", "build:cti": "ng-packagr -p ./projects/cee-ctilib/ng-package.json && cd ./dist && npm pack ./cee-ctilib", "build:header": "ng-packagr -p ./projects/header/ng-package.json && cd ./dist && npm pack ./header", "build:convo-header": "ng-packagr -p ./projects/convo-header/ng-package.json && cd ./dist && npm pack ./convo-header", "build:convo-details": "ng-packagr -p ./projects/convo-details/ng-package.json && cd ./dist && npm pack ./convo-details", "build:convo-list": "ng-packagr -p ./projects/convo-list/ng-package.json && cd ./dist && npm pack ./convo-list", "build:convo-window": "ng-packagr -p ./projects/convo-window/ng-package.json && cd ./dist && npm pack ./convo-window", "build:agent-settings": "ng-packagr -p ./projects/agent-settings/ng-package.json && cd ./dist && npm pack ./agent-settings", "build:entities": "ng-packagr -p ./projects/entities/ng-package.json && cd ./dist && npm pack ./entities", "build:all-libraries": "npm run build:cti && npm run build:header && npm run build:convo-header && npm run build:convo-details && npm run build:convo-list && npm run build:convo-window && npm run build:agent-settings && npm run build:entities", "refreshNpmrc": "vsts-npm-auth -config .npmrc", "prepareForPr": "ng lint --fix && ng build --prod && ng test" }, "private": false, "dependencies": { "@angular/animations": "12.0.1", "@angular/common": "12.0.1", "@angular/compiler": "12.0.1", "@angular/core": "12.0.1", "@angular/forms": "12.0.1", "@angular/platform-browser": "12.0.1", "@angular/platform-browser-dynamic": "12.0.1", "@angular/router": "12.0.1", "@auth0/angular-jwt": "^5.0.2", "@azure/msal-angular": "^2.0.0-beta.1", "@azure/msal-browser": "^2.12.1", "@ctrl/ngx-emoji-mart": "^5.1.0", "@jsier/retrier": "^1.2.4", "@mercury/merc-ng-core": "^5.1.0", "@mercury/merc-pattern-lib": "^2.11.0", "@microsoft/applicationinsights-web": "^2.5.11", "@microsoft/signalr": "^5.0.6", "@ngrx/effects": "^12.0.0", "@ngrx/entity": "^12.0.0", "@ngrx/store": "^12.0.0", "angular-oauth2-oidc": "^10.0.3", "dayjs": "^1.10.4", "guid-typescript": "^1.0.9", "ngx-quill": "^13.2.0", "npm": "^6.14.11", "popper": "^1.0.1", "popper.js": "1.16.0", "quill": "^1.3.7", "quill-placeholder-module": "^0.3.1", "rxjs": "^7.0.1", "ts-retry": "^2.3.1", "tslib": "^2.2.0", "vsts-npm-auth": "^0.41.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^12.0.0", "@angular-devkit/build-optimizer": "^0.1200.0", "@angular/cli": "^12.0.1", "@angular/compiler-cli": "12.0.1", "@angular/language-service": "12.0.1", "@ngrx/schematics": "^12.0.0", "@ngrx/store-devtools": "^12.0.0", "@types/deep-freeze": "^0.1.2", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "2.0.8", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "deep-freeze": "^0.0.1", "jasmine-core": "~3.7.1", "jasmine-json-test-reporter": "1.0.0-beta", "jasmine-marbles": "0.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "^6.3.2", "karma-chrome-launcher": "^3.1.0", "karma-cli": "^2.0.0", "karma-coverage-istanbul-reporter": "^3.0.3", "karma-htmlfile-reporter": "^0.3.8", "karma-jasmine": "^4.0.1", "karma-jasmine-html-reporter": "^1.6.0", "karma-json-reporter": "^1.2.1", "karma-typescript-es6-transform": "^5.5.1", "karma-webpack": "^5.0.0", "mockdate": "^3.0.5", "ng-packagr": "^12.0.0", "prettier": "1.18.2", "protractor": "~7.0.0", "protractor-jasmine2-html-reporter": "0.0.7", "rxjs-marbles": "^7.0.0", "ts-node": "8.4.1", "tslint": "^6.1.3", "typescript": "4.2.4", "webpack": "^5.37.1" }, "author": "Mercury Team", "license": "" } 14 Answers
We figured it out. As you can see in our packages.json, we have a dependency on webpack. It seems angular-devkit/build-angular does as well. We believe this created the known issue of multiple webpacks colliding and causing issues. Removing our dependency on webpack fixed the issue.
Yep, the issue is related to the 2 different webpack libs. To resolve that add in to your package.json the next block:
"resolutions": { "webpack": "5.41.1" }, In my case it was wrong path.
I ran the command from git Bash with wrong camelCase letters.
like: c://Dev/Product instead of: c://dev/Product
Fixed the path and it works.
I had a similar problem in "running ng" test on Angular 13.
"dependencies": { "ngx-build-plus": "^13.0.1", // requires webpack 5.70.0 ..... "devDependencies": { "@angular-devkit/build-angular": "13.2.4", // requires webpack 5.67.0 --> "devDependencies": { "@angular-devkit/build-angular": "13.3.0", // requires webpack 5.70.0 This usually occurs when webpack is a dependency of multiple packages. Locking inside the package-lock.json and searching for "webpack" dependencies was my way to go. "npm dedupe " can sometimes resolve such issues.
1Looking at the other answers to this question, I realized that the webpack version conflict was the problem.
Investigation
I tried adding a resolution like in this answer, but that didn't work.
I saw that I had a dependency on webpack ^5.6.7 in my package.json, so now I needed to find which dependencies have a conflict with that.
So I ran this command to find out which of my dependencies have a hard dependency on webpack i.e. specify the exact major or minor version without ^ or ~
cd node_modules # Find all package.json files and look for '"webpack":' line which shows the dependency # Print the file name as well as the webpack version line so its easy to find out which dependency has the issue find . -name package.json | xargs -I{} sh -c "echo {} && grep '\"webpack\":' {}" | grep -B1 webpack I realized from the above that I had dependencies that had something like webpack: 4.x and hence were conflicting.
Solution
Removing the webpack dependency from the package.json fixed the issue for me.
in my case , upgrading node to 16.14.2 works
1I would like to add an additional answer to this problem, because the accepted answer actually didn't work for my particular case.
I have an angular library project and as one should know, angular library projects have usually the following structure:
package.json projects/my-lib/package.json The project was working fine until angular 11, but after upgrading to angular 13, I started getting the same error mentioned by the OP when trying to run tests (oddly, the issue was only when running tests):
The 'compilation' argument must be an instance of Compilation I checked all dependencies for webpack versions and it was matching the version everywhere. I lost almost two weeks searching for answer and none of the proposed solutions worked for me.
Finally, I noticed that both package.json pointed to the very same dependency:
"@angular-devkit/build-angular": "~13.3.9", In a wild guess, I thought that MAYBE having it installed both in the parent and the child could cause angular builder to mix up something and so I removed from the sub project. And that was it. The tests started working again.
Lesson: when you have an angular library project, always check both package.json and prefer to avoid duplicate dependencies. It might bite you.
Ran into the same problem, however for Angular 15.2.2 and the storybook 6.5.16.
You will need to specify the webpack version in your package.json to match the version of @angular-devkit/build-angular
use npm ls webpack and look for its direct match when adding it to you package.json
Don't use "webpack": "^x.xx.x" with the ^ cause it might pick a newer version and you have the same problem.
For my specific version webpack had to be set to: "webpack": "5.75.0"
In my case, the issue occurred when I installed webpack & webpack-cli on a package in my monorepo.
I fixed it by going to the root of the monorepo and running yarn install
I ran into this issue with Angular 16.0.2 and storybook 6.5.16. The npm dedupe webpack command did not resolve my issue.
After running npm ls webpack, I did recognize that storybook depended on a different webpack version. npm ls webpack results screenshot So, I added the version which was specified in the @angular-devkit section of the results, "webpack": "5.80.0", to the package.json file (in the Dependancies section) addition to package.json.
in my case, yarn-upgrade-all has solved the problem
In my case was because the multiple webpack installations in order o fix a run the next command
npm ls webpack +-- @angular-devkit/[email protected] | +-- @angular-devkit/[email protected] | | `-- [email protected] deduped | +-- @ngtools/[email protected] | | `-- [email protected] deduped | +-- [email protected] | | `-- [email protected] deduped | +-- [email protected] | | `-- [email protected] deduped | +-- [email protected] | | `-- [email protected] deduped | +-- [email protected] | | `-- [email protected] deduped | +-- [email protected] | | `-- [email protected] deduped | +-- [email protected] | | `-- [email protected] deduped | +-- [email protected] | | `-- [email protected] deduped | +-- [email protected] | | `-- [email protected] deduped | +-- [email protected] | | `-- [email protected] deduped | +-- [email protected] | | +-- [email protected] | | | `-- [email protected] deduped | | `-- [email protected] deduped | +-- [email protected] | | +-- [email protected] | | | `-- [email protected] deduped | | `-- [email protected] deduped | `-- [email protected] | `-- [email protected] | `-- [email protected] deduped +-- @storybook/[email protected] | +-- @storybook/[email protected] | | +-- [email protected] | | | `-- [email protected] deduped | | +-- [email protected] | | | `-- [email protected] deduped | | +-- [email protected] | | | `-- [email protected] deduped | | +-- [email protected] | | | `-- [email protected] deduped | | `-- [email protected] deduped | `-- [email protected] `-- [email protected] `-- [email protected] deduped Then I added this override in package.json
"overrides": { "webpack": "5.80.0" } I had the same error. In my case I was not using multiple versions of Webpack, and was seeing the issue even after running upgrades. Looking at the code there were a few mentions of 'HotModuleReplacement' which called the module that was throwing the error
In the Webpack.config file under PLUGINS I had the following set
new webpack.HotModuleReplacementPlugin()
I commented out that line and all the issues went away. Still not really sure of the underlying cause, but if you get the error its worth trying this as it may be an easy fix.
prolly a terrible solution but i went to node_modules/@expo/webpack-config/node_modules/webpack-manifest-plugin/node_modules/webpack/lib/NormalModule.js:227 and deleted this line
if (!(compilation instanceof Compilation)) { throw new TypeError( "The 'compilation' argument must be an instance of Compilation" ); } and it seems to work now.
