Latest 12.0.2 crashes on serve or build

[bobskigit]

🐞 Bug report

• new
• [ x ] build
• [ x ] serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

No

Description

When attempting ng b or ng s, compilation crashes

🔬 Minimal Reproduction

🔥 Exception or Error

C:\Users\bobla\Documents\projects\videoads\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:125
                        throw new TypeError(
                              ^

TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (C:\Users\bobla\Documents\projects\videoads\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:125:10)    at C:\Users\bobla\Documents\projects\videoads\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:43:19
    at Hook.eval [as call] (eval at create (C:\Users\bobla\Documents\projects\videoads\node_modules\tapable\lib\HookCodeFactory.js:19:10), :7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\bobla\Documents\projects\videoads\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\Users\bobla\Documents\projects\videoads\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1030:30)
    at C:\Users\bobla\Documents\projects\videoads\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1073:29    
    at Hook.eval [as callAsync] (eval at create (C:\Users\bobla\Documents\projects\videoads\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\bobla\Documents\projects\videoads\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\Users\bobla\Documents\projects\videoads\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1068:28)
    at Compiler.runAsChild (C:\Users\bobla\Documents\projects\videoads\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:520:8)
    at C:\Users\bobla\Documents\projects\videoads\node_modules\@ngtools\webpack\src\resource_loader.js:150:27
    at new Promise ()
    at WebpackResourceLoader._compile (C:\Users\bobla\Documents\projects\videoads\node_modules\@ngtools\webpack\src\resource_loader.js:149:16)
    at WebpackResourceLoader.get (C:\Users\bobla\Documents\projects\videoads\node_modules\@ngtools\webpack\src\resource_loader.js:239:44)    
    at Object.resourceHost.readResource (C:\Users\bobla\Documents\projects\videoads\node_modules\@ngtools\webpack\src\ivy\host.js:30:35)     
    at AdapterResourceLoader.preload (C:\Users\bobla\Documents\projects\videoads\node_modules\@angular\compiler-cli\src\ngtsc\resource\src\loader.js:88:39)

🌍 Your Environment

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

Angular CLI: 12.0.2
Node: 16.2.0
Package Manager: npm 7.14.0
OS: win32 x64

Angular: 12.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... pwa, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.2
@angular-devkit/build-angular   12.0.2
@angular-devkit/build-webpack   0.1200.2
@angular-devkit/core            12.0.2
@angular-devkit/schematics      12.0.2
@schematics/angular             12.0.2
ng-packagr                      12.0.2
rxjs                            6.6.7
typescript                      4.2.4

[alan-agius4]

This typically means you have multiple webpack versions in your project.

Can you please provide the output of the below command?

npm ls webpack

[bobskigit]

videoads@1.1.22 C:\Users\bobla\Documents\projects\videoads
├─┬ @angular-devkit/build-angular@12.0.2
│ ├─┬ @angular-devkit/build-optimizer@0.1200.2
│ │ └── webpack@5.37.1 deduped
│ ├─┬ @ngtools/webpack@12.0.2
│ │ └── webpack@5.37.1 deduped
│ ├─┬ babel-loader@8.2.2
│ │ └── webpack@5.37.1 deduped
│ ├─┬ circular-dependency-plugin@5.2.2
│ │ └── webpack@5.37.1 deduped
│ ├─┬ copy-webpack-plugin@8.1.1
│ │ └── webpack@5.37.1 deduped
│ ├─┬ css-loader@5.2.4
│ │ └── webpack@5.37.1 deduped
│ ├─┬ css-minimizer-webpack-plugin@3.0.0
│ │ └── webpack@5.37.1 deduped
│ ├─┬ less-loader@8.1.1
│ │ └── webpack@5.37.1 deduped
│ ├─┬ mini-css-extract-plugin@1.5.1
│ │ └── webpack@5.37.1 deduped
│ ├─┬ postcss-loader@5.2.0
│ │ └── webpack@5.37.1 deduped
│ ├─┬ raw-loader@4.0.2
│ │ └── webpack@5.37.1 deduped
│ ├─┬ sass-loader@11.0.1
│ │ └── webpack@5.37.1 deduped
│ ├─┬ source-map-loader@2.0.1
│ │ └── webpack@5.37.1 deduped
│ ├─┬ style-loader@2.0.0
│ │ └── webpack@5.37.1 deduped
│ ├─┬ stylus-loader@5.0.0
│ │ └── webpack@5.37.1 deduped
│ ├─┬ terser-webpack-plugin@5.1.2
│ │ └── webpack@5.37.1 deduped
│ ├─┬ webpack-dev-middleware@4.1.0
│ │ └── webpack@5.37.1 deduped
│ ├─┬ webpack-dev-server@3.11.2
│ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ └── webpack@5.37.1 deduped
│ │ └── webpack@5.37.1 deduped
│ ├─┬ webpack-subresource-integrity@1.5.2
│ │ └── webpack@5.37.1 deduped
│ └── webpack@5.36.2
└─┬ @angular-devkit/build-webpack@0.1200.2
  └── webpack@5.37.1

thanks for the prompt reply

[alan-agius4]

This looks like it may be a problem with NPM 7 and dependency hoisting.

Can you try to downgrade to NPM 6 or use an alternative package manager such as yarn?

[bobskigit]

It's exactly that, I've fixed up all the webpack dependencies and its ok now.

thanks

[arobinson]

The issue is not just with NPM 7 but it is the fact that @angular-devkit/build-angular has a dependency of "webpack": "5.36.2", which means that the top level project must use that webpack version, not a later version with much needed bug fixes. Webpack 5.36.2 has serious performance issues and due to the dependency, newer versions cannot be used

[angular-automatic-lock-bot]

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.}