Solvedangular cli Error on update to Webpack 4.0.1

Versions

> ng --version

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.7.1
Node: 8.9.4
OS: darwin x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 4.0.1

Repro steps

  • Update @angular/cli to 1.7.1
  • ng update
  • npm install webpack

Observed behavior

> ng build --prod --environment=current --output-hashing=none --build-optimizer

  0% compiling
An error occured during the build:
TypeError: Cannot read property 'thisCompilation' of undefined
    at NodeTemplatePlugin.apply (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/webpack/lib/node/NodeTemplatePlugin.js:19:18)
    at Compiler.apply (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/tapable/lib/Tapable.js:375:16)
    at Object.compileTemplate (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/html-webpack-plugin/lib/compiler.js:48:17)
    at Compiler.<anonymous> (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/html-webpack-plugin/index.js:47:40)
    at Compiler.applyPluginsParallel (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/tapable/lib/Tapable.js:293:14)
    at applyPluginsAsync.err (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:499:9)
    at Compiler.applyPluginsAsyncSeries (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/tapable/lib/Tapable.js:195:46)
    at Compiler.compile (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:492:8)
    at readRecords.err (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:279:11)
    at Compiler.readRecords (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:391:11)
    at applyPluginsAsync.err (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:276:10)
    at next (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.compiler.plugin (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/@angular/cli/node_modules/webpack/lib/CachePlugin.js:51:59)
    at Compiler.applyPluginsAsyncSeries (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/tapable/lib/Tapable.js:206:13)
    at applyPluginsAsync.err (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:273:9)
    at next (/Users/niklissad/Sites/adwise/fishad/frontend/node_modules/tapable/lib/Tapable.js:202:11)
Cannot read property 'thisCompilation' of undefined

Desired behavior

Working build

Mention any other details that might be useful (optional)

I have this problem also with

npm install @angular/cli
ng new w4
cd w4
npm install webpack
npm run build

Also on other macbook which I don't use for development with MacOS 10.13.3

17 Answers

✔️Accepted Answer

@DanPride

I had the same issue, made the same mistake of upgrading webpack independently.
This is how I was finally able to solve the issue:

npm remove webpack
npm install webpack@3.11.0

webpack's newest version (4.0.0) seems to be buggy

Other Answers:

To update the version of webpack, it must be updated in the Angular CLI package itself. Installing another version of webpack on the project dependencies is neither support nor will work. You would end up having multiple webpack dependencies in your project and this does not work.

We're working on an update for the next major version.

notice that there might be 1. global webpack 2. local webpack
two things are involved. you have to remove and re-install both to fix the issue.

More Issues: