search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.72k stars 11.98k forks source link

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

Closed alaaahmedmu closed 1 year ago

alaaahmedmu commented 1 year ago

Command

other

Is this a regression?

The previous version in which this bug was not present was

12

Description

When trying to run ng run app:build-storybook, this error occurred

9% setup compilation SourceMapDevToolPlugin/Users/ahmed.alaa/projects/project/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:143
            throw new TypeError(
                  ^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/ahmed.alaa/projects/project/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:143:10)
    at SourceMapDevToolModuleOptionsPlugin.apply (/Users/ahmed.alaa/projects/project/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/SourceMapDevToolModuleOptionsPlugin.js:50:27)

But, when disable sourceMap to be false in angular.json it works and compiles successfully.

Minimal Reproduction

ng run app:build-storybook

packages installed

"@angular-builders/custom-webpack": "^13.1.0",
"@angular-devkit/build-angular": "^13.3.2",
"@angular-eslint/builder": "^13.2.0",
"@angular-eslint/eslint-plugin": "^13.2.0",
"@angular-eslint/eslint-plugin-template": "^13.2.0",
"@angular-eslint/schematics": "^13.2.0",
"@angular-eslint/template-parser": "^13.2.0",
"@angular/cli": "^13.3.2",
"@angular/compiler": "^13.3.2",
"@angular/compiler-cli": "^13.3.2",
"@angular/elements": "^13.0.1",
"@angular/language-service": "^13.3.2",
"@babel/core": "^7.16.0",
"@hmscore/cordova-plugin-hms-push": "^6.3.0-304",
"@ionic/angular-toolkit": "^6.1.0",
"@ionic/lab": "3.2.9",
"@nguniversal/builders": "^13.1.0",
"@storybook/addon-a11y": "^6.3.12",
"@storybook/addon-actions": "^6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-links": "^6.3.12",
"@storybook/addon-options": "^5.3.21",
"@storybook/addon-viewport": "^6.3.12",
"@storybook/angular": "^6.3.12",
"@storybook/builder-webpack5": "^6.3.12",
"@storybook/manager-webpack5": "^6.3.12",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "^2.0.9",
"@types/socket.io-client": "^1.4.32",
"@typescript-eslint/eslint-plugin": "^5.19.0",
"@typescript-eslint/eslint-plugin-tslint": "^5.1.0",
"@typescript-eslint/parser": "^5.19.0",
"@webcomponents/custom-elements": "^1.5.0",
"arg": "^5.0.1",
"async": "^3.2.2",
"aws-sdk": "^2.1030.0",
"babel-loader": "^8.2.3",
"chalk": "^4.1.0",
"clear": "^0.1.0",
"codelyzer": "^6.0.2",
"com-badrit-base64": "^0.2.0",
"cordova-android": "10.1.2",
"cordova-clipboard": "^1.3.0",
"cordova-ios": "^6.2.0",
"cordova-plugin-add-swift-support": "^2.0.2",
"cordova-plugin-android-permissions": "^1.1.2",
"cordova-plugin-androidx": "^3.0.0",
"cordova-plugin-androidx-adapter": "^1.1.3",
"cordova-plugin-app-launcher": "^0.4.0",
"cordova-plugin-app-version": "^0.1.12",
"cordova-plugin-apprate": "^1.7.2",
"cordova-plugin-appsflyer-sdk": "^6.10.3",
"cordova-plugin-camera": "^6.0.0",
"cordova-plugin-camera-preview": "^0.12.2",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-device-motion": "^2.0.1",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-facebook-connect": "^3.2.0",
"cordova-plugin-file": "^7.0.0",
"cordova-plugin-file-opener2": "^3.0.5",
"cordova-plugin-filechooser": "^1.2.0",
"cordova-plugin-filepath": "^1.6.0",
"cordova-plugin-filepicker": "^1.1.6",
"cordova-plugin-fingerprint-aio": "^5.0.1",
"cordova-plugin-firebase-analytics": "^6.1.0",
"cordova-plugin-firebase-config": "^6.1.0",
"cordova-plugin-firebase-crash": "^4.2.0",
"cordova-plugin-googleplus": "^8.5.2",
"cordova-plugin-inappbrowser": "^5.0.0",
"cordova-plugin-ionic": "^5.5.1",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-iroot": "^3.1.0",
"cordova-plugin-mfekyc": "^1.4.1",
"cordova-plugin-mixpanel": "^4.7.1",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-network-information": "^3.0.0",
"cordova-plugin-privacyscreen-storyboard": "^0.0.2",
"cordova-plugin-shake": "^0.7.0",
"cordova-plugin-sim": "^1.3.3",
"cordova-plugin-splashscreen": "^6.0.0",
"cordova-plugin-statusbar": "^3.0.0",
"cordova-plugin-x-socialsharing": "^6.0.3",
"cordova-sqlite-storage": "^6.0.0",
"cordova-support-android-plugin": "^1.0.2",
"cordova.plugins.diagnostic": "^6.0.3",
"es6-promise-plugin": "^4.2.2",
"eslint": "^8.13.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-angular": "^4.1.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jsdoc": "^39.2.0",
"eslint-plugin-prefer-arrow": "1.2.2",
"eslint-plugin-prettier": "^4.0.0",
"figlet": "^1.5.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"javascript-obfuscator": "^3.0.0",
"karma": "^6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "~1.5.4",
"ng-packagr": "^13.3.1",
"ngx-spec": "^2.1.4",
"npm": "^6.14.8",
"prettier": "^2.6.0",
"protractor": "^7.0.0",
"protractor-beautiful-reporter": "^1.3.6",
"run-script-os": "^1.1.1",
"storybook-addon-designs": "^6.2.1",
"ts-node": "^8.3.0",
"typescript": "^4.4.3",
"webpack-dev-server": "^4.11.1",
"webpack-obfuscator": "^3.5.1"

Exception or Error

9% setup compilation SourceMapDevToolPlugin/Users/ahmed.alaa/projects/project/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:143
            throw new TypeError(
                  ^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/ahmed.alaa/projects/project/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:143:10)
    at SourceMapDevToolModuleOptionsPlugin.apply (/Users/ahmed.alaa/projects/project/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/SourceMapDevToolModuleOptionsPlugin.js:50:27)

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 13.3.11
Node: 16.14.0
Package Manager: npm 6.14.18
OS: darwin arm64

Angular: 13.4.0
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.0
@angular-devkit/build-angular   13.3.11
@angular-devkit/core            16.2.0
@angular-devkit/schematics      13.3.11
@angular/cli                    13.3.11
@angular/fire                   7.6.1
@angular/pwa                    13.3.11
@nguniversal/builders           13.1.1
@nguniversal/express-engine     13.1.1
@schematics/angular             13.3.11
ng-packagr                      13.3.1
rxjs                            6.6.7
typescript                      4.6.4

Anything else relevant?

No response

JeanMeche commented 1 year ago

You have incompatible dependencies.

Both should rely on v13.

alaaahmedmu commented 1 year ago

@JeanMech solved the incompatible issue and same error occurred.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 13.3.11
Node: 16.14.0
Package Manager: npm 6.14.18
OS: darwin arm64

Angular: 13.4.0
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.11
@angular-devkit/build-angular   13.3.11
@angular-devkit/core            13.3.11
@angular-devkit/schematics      13.3.11
@angular/cli                    13.3.11
@angular/fire                   7.6.1
@angular/pwa                    13.3.11
@nguniversal/builders           13.1.1
@nguniversal/express-engine     13.1.1
@schematics/angular             13.3.11
ng-packagr                      13.3.1
rxjs                            6.6.7
typescript                      4.6.4
alan-agius4 commented 1 year ago

Angular version 13 is no longer under support please update to a supported version.

See our support policy: https://angular.io/guide/releases#actively-supported-versions

angular-automatic-lock-bot[bot] commented 1 year ago

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.