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

Question

for some reason I have to use angular-builders to custom webpack.

when I update webpack version to ^5.11.0 and I try to use terser-webpack-plugin to compressed code.

there some error throw out,but I dont know how to fix it.because I configuration with documentation.

npm run build error:

0% compiling
An error occurred during the build:
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:119:10)
    at /Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/terser-webpack-plugin/dist/index.js:566:67
    at SyncHook.eval [as call] (eval at create (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:85:1)
    at SyncHook.lazyCompileHook (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:321:11
    at Compiler.readRecords (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:529:11)
    at /Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/Compiler.js:318:10
    at eval (eval at create (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at /Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/webpack/lib/CachePlugin.js:50:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/kuubee/Desktop/self_porject/fontend/ng-blog/node_modules/@angular-builders/custom-webpack/node_modules/tapable/lib/Hook.js:154:20)
An unhandled exception occurred: The 'compilation' argument must be an instance of Compilation
See "/private/var/folders/zj/qw9n84kj6hsb0011brv_8c5w0000gn/T/ng-NaStay/angular-errors.log" for further details.
npm ERR! code 127
npm ERR! path /Users/kuubee/Desktop/self_porject/fontend/ng-blog
npm ERR! command failed
npm ERR! command sh -c ng build --prod

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kuubee/.npm/_logs/2020-12-28T05_51_41_395Z-debug.log

my environment:

Angular CLI: 11.0.5
Node: 15.3.0
OS: darwin x64

Angular: 11.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.1
@angular-devkit/build-angular   0.1100.5
@angular-devkit/core            10.2.1
@angular-devkit/schematics      11.0.5
@angular/cdk                    11.0.3
@angular/flex-layout            11.0.0-beta.33
@angular/material               11.0.3
@schematics/angular             11.0.5
@schematics/update              0.1100.5
rxjs                            6.6.3
typescript                      4.0.5
webpack                         5.11.0

webpack.prod.config.js:

const {
  merge
} = require('webpack-merge');
const base = require('./webpack.config')
// if I annotate this line everything is ok
const TerserPlugin = require("terser-webpack-plugin");
module.exports = merge(base, {
// and below block
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      cache: true,
      parallel: true
    })],
  },
})

angular.json:

{
...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/ng-blog",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.json",
            "aot": true,
            "styles": [],
            "scripts": []
          },
          "configurations": {
            "production": {
              "customWebpackConfig": {
                "path": "webpack.prod.config.js",
                "mergeStrategies": {
                  "optimization": "replace"
                },
                "replaceDuplicatePlugins": false
              },
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": false,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "development": {
              "customWebpackConfig": {
                "path": "webpack.dev.config.js",
                "replaceDuplicatePlugins": true
              }
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "ng-blog:build:development"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng-blog:build:production"
            },
            "development": {
              "browserTarget": "ng-blog:build:development"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng-blog: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"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "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": "ng-blog:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ng-blog:serve:production"
            }
          }
        }
      }
...
}

Answer 1

I also encountered this error with webpack. I solved the problem by adding capital letters into the path to the directory in which the command is executed.

Let's take the following case:

I develop an application in the directory :

C:\Users\username\Desktop\myApp

I compile the assets of this application with webpack. The Compilation type error is triggered if I execute the npm run dev command in c:\users\username\desktop\myapp because webpack can't find the node_modules folder. To fix the error you just have to run your command into the right directory with also capital letters.

C:\Users\username\Desktop\myApp> npm run dev

Webpack should find the node_modules folder and you won't have any more errors.

Answer 2

Looks like you have something in your globally installed npm packages, I had to remove them all (just rm -rf /usr/local/lib/node_modules) and reinstall everything. Maybe there were a more sane way to do it.

Answer 3

add this in the build angular.json

"builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "outputPath": "dist/ng-blog",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.json",
        "aot": true,
         "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "src/styles.scss"
        ],
        "scripts": []
      },

and configure environment.prod.ts

export const environment = {production: true};