angular-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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 16 (1 by maintainers)

Most upvoted comments

@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

+64

JanTheHun on Mar 1, 2018

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.

filipesilva on Feb 27, 2018

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.

martianmartian on Mar 13, 2018

@DanPride Thanks a lot man… your solution below worked fine for me.

npm remove webpack npm install webpack@3.11.0

Many Thanks

NeyazA on Mar 9, 2018

I had the same problems. Update @angular/cli to 1.7.2 helped

vduzh on Mar 4, 2018

Same issue. I also made the mistake of updating webpack independently but no don’t seem to be able to get a working build now now matter what I do. Deleted node folder/npm i with no change in result

DanPride on Feb 28, 2018