TypeError: Cannot read property 'tapPromise' of undefined

Question

I am using Angular Build Optimization in Angular 9 project and using below code for generating bundles but getting below error. I Google with the error but didn't find any concrete answer.

As the error suggests issue is in the library itself only. I did npm install and npm audit fix as well but getting the same error again and again.

Error Details

An error occurred during the build:
TypeError: Cannot read property 'tapPromise' of undefined
    at compiler.hooks.compilation.tap.compilation (E:\Code\blogui\BlogApp\node_modules\compression-webpack-plugin\dist\index.js:269:39)
    at SyncHook.eval [as call] (eval at create (E:\Code\blogui\BlogApp\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:25:1)
    at SyncHook.lazyCompileHook (E:\Code\blogui\BlogApp\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.newCompilation (E:\Code\blogui\BlogApp\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\Compiler.js:631:26)
    at hooks.beforeCompile.callAsync.err (E:\Code\blogui\BlogApp\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\Compiler.js:667:29)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Code\blogui\BlogApp\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (E:\Code\blogui\BlogApp\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.compile (E:\Code\blogui\BlogApp\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\Compiler.js:662:28)
    at readRecords.err (E:\Code\blogui\BlogApp\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\Compiler.js:321:11)

angular.json file

 "build": {
                    "builder": "@angular-builders/custom-webpack:browser",
                    "options": {
                        "outputPath": "dist/BlogApp",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "customWebpackConfig": {
                            "path": "**src/custom-webpack.config.js**"
                        },
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            "src/sitemap.xml",
                            "src/robots.txt"
                        ],
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": ["./node_modules/jquery/dist/jquery.min.js"]
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [{
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "6kb",
                                    "maximumError": "10kb"
                                }
                            ]
                        }
                    }
                },

custom-webpack.config.js file

const CompressionPlugin = require(`compression-webpack-plugin`);
const BrotliPlugin = require(`brotli-webpack-plugin`);
const path = require(`path`);
module.exports = {
    plugins: [
        new BrotliPlugin({
            asset: '[fileWithoutExt].[ext].br',
            test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/
        }),
        new CompressionPlugin({
            test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/,
            filename(info) {
                let opFile = info.path.split('.'),
                    opFileType = opFile.pop(),
                    opFileName = opFile.join('.');
                return `${opFileName}.${opFileType}.gzip`;
            }
        })
    ],
}

package.json file

{
    "name": "blog-app",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular-builders/custom-webpack": "^10.0.1",
        "@angular/animations": "~9.1.6",
        "@angular/common": "~9.1.6",
        "@angular/compiler": "~9.1.6",
        "@angular/core": "~9.1.6",
        "@angular/forms": "~9.1.6",
        "@angular/platform-browser": "~9.1.6",
        "@angular/platform-browser-dynamic": "~9.1.6",
        "@angular/router": "~9.1.6",
        "@syncfusion/ej2-angular-richtexteditor": "^18.2.56",
        "aws-sdk": "^2.797.0",
        "express-static-gzip": "^2.1.0",
        "jquery": "^3.5.1",
        "ng-lazyload-image": "^9.1.0",
        "ngx-spinner": "^10.0.1",
        "rxjs": "~6.5.4",
        "schema-utils": "^3.0.0",
        "tslib": "^1.10.0",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.10.2"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.1100.3",
        "@angular/cli": "~9.1.5",
        "@angular/compiler-cli": "~9.1.6",
        "@types/jasmine": "~3.5.0",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.19.6",
        "brotli-webpack-plugin": "^1.0.0",
        "codelyzer": "^5.1.2",
        "compression-webpack-plugin": "^7.0.0",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~5.0.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~2.1.0",
        "karma-jasmine": "~3.0.1",
        "karma-jasmine-html-reporter": "^1.4.2",
        "protractor": "^7.0.0",
        "ts-node": "~8.3.0",
        "tslint": "~6.1.0",
        "typescript": "~3.8.3"
    }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

Answer 1

I had that problem, but with React. And the cause was an incompatibility between the compression plugin version and the Webpack version.

In your case I think you use Webpack "indirectly" through "@angular-builders/custom-webpack", because I don't see it in your package.json

Could it be that your Webpack has the following origin?

"@angular-builders/custom-webpack": "^10.0.1" -> "webpack-merge": "^4.2.2" -> "webpack": "^5.3.2"

Anyway, "compression-webpack-plugin": "^7.0.0", needs "webpack": "^5.9.0". So I recommend that you downgrade to "compression-webpack-plugin": "^6.0.5" which depends on "webpack": "^5.3.2".

Try that version or a lower one to see what happens.

Credits

Answer 2

I experienced that problem while developing using REACT. I used:

npm audit fix --force

It changed two things:

compression-webpack-plugin from ^2.0.0 to ^8.0.1

webpack-dev-server from ^3.11.0 to ^0.64.2

The command broke my development system it threw the errors in following sequence:

1. Error: Cannot find module 'webpack/bin/config-optimist' Then, I reverted webpack-dev-server back to ^3.11.0, and the error was modified.
2. TypeError: Cannot read property 'tapPromise' of undefined Then I reverted compression-webpack-plugin back to ^2.0.0

It solved the problem.