The 'compilation' argument must be an instance of Compilation

user_4848606 0
Viewed 17546

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/popper.js/dist/umd/popper.min.js"
            ],
            "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/popper.js/dist/umd/popper.min.js"
            ]
          }
        },
        "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": ""
}
angular-cli
6 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.

user_48486060

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"
    },
user_28386150

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.

user_78411700

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.

user_102544760

in my case , upgrading node to 16.14.2 works

user_63558030
user_38172320
Related