Issue: Cannot read property 'thisCompilation' of undefined

[ruisebastiao]

Versions

Angular CLI: 1.7.1
Node: 8.9.4
OS: linux x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.3
@angular/cli: 1.7.1
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.32
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 4.0.1

Observed behavior

** NG Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
  0% compilingCannot read property 'thisCompilation' of undefined
TypeError: Cannot read property 'thisCompilation' of undefined
    at NodeTemplatePlugin.apply (/home/rui/projects/blackbox-2m-web/node_modules/webpack/lib/node/NodeTemplatePlugin.js:19:18)
    at Compiler.apply (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:375:16)
    at Object.compileTemplate (/home/rui/projects/blackbox-2m-web/node_modules/html-webpack-plugin/lib/compiler.js:48:17)
    at Compiler.<anonymous> (/home/rui/projects/blackbox-2m-web/node_modules/html-webpack-plugin/index.js:47:40)
    at Compiler.applyPluginsParallel (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:293:14)
    at applyPluginsAsync.err (/home/rui/projects/blackbox-2m-web/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:499:9)
    at Compiler.applyPluginsAsyncSeries (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:195:46)
    at Compiler.compile (/home/rui/projects/blackbox-2m-web/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:492:8)
    at compiler.applyPluginsAsync.err (/home/rui/projects/blackbox-2m-web/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:83:18)
    at next (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.compilerInvalid (/home/rui/projects/blackbox-2m-web/node_modules/webpack-dev-middleware/lib/Shared.js:161:5)
    at next (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:204:14)
    at Compiler.compiler.plugin (/home/rui/projects/blackbox-2m-web/node_modules/@angular/cli/node_modules/webpack/lib/CachePlugin.js:48:5)
    at next (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:204:14)
    at Compiler.compiler.plugin (/home/rui/projects/blackbox-2m-web/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:462:13)
    at Compiler.applyPluginsAsyncSeries (/home/rui/projects/blackbox-2m-web/node_modules/tapable/lib/Tapable.js:206:13)

Desired behavior

Mention any other details that might be useful (optional)

Reverting webpack to 3.11.0 solves this issue

[HackPoint]

Same here...

[TonyNgeno]

Whats the solution to the problem?

[filipesilva]

Thanks for reporting this issue. However, this issue is a duplicate of an existing issue #9793. Please subscribe to that issue for future updates.

[ademidun]

Here is the answer from issues #9793 :

npm remove webpack
npm install [email protected]

[aelbarbary]

thanks @ademidun ... that works for me

[LucasViniciusPereira]

I had the same problem, I solved unistall webpack and unistall @ angular / cli -g and local and I installed only @ angular / cli because in the new version @ angular / cli no direct reliance of webpack.

I use @angular/cli version 1.7.3

[vseeberger]

thanks @ademidun ... that works for me too!

[ashkaushik]

thanks @ademidun .. it works

[switch120]

For anyone else that comes across this ... just updating to Angular CLI 1.7.4 fixed this issue for me. I already had 3.11.0 installed for Webpack, but was using CLI 1.6.8 and getting this error on a fresh pull of the app (with no node_modules folder yet).

npm remove @angular/cli
npm install @angular/cli (as of writing, v1.7.4)

HTH!

[brgrz]

Updating to 1.7.4 did not solve this for me, I still see get the Cannot read property 'thisCompilation' of undefined when running ng build.

This is the output of ng version:

Angular CLI: 1.7.4
Node: 9.2.0
OS: win32 x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@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.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 4.6.0

[ashkaushik]

@brgrz

Please use below command
npm remove webpack
npm install [email protected]

[brgrz]

@ashkaushik yeah, I know, but I want to use the new version of webpack, however I did just saw this issue saying it has to be updated inside the CLI itself #9793

[clydin]

The CLI internally manages the build system and versions thereof. Webpack 4.x is a major version change which contains a multitude of breaking changes. 6.x of the CLI provides full support for the new version and is currently in RC.

[Klaudia-Brysiewicz]

Removing node_modules
try with "webpack": "^3.6.0",
and npm install

[legg]

I get the issue with create react app, ejected
$ npm run build
error: Cannot read property 'thisCompilation' of undefined

For a temp fix, edit the config/webpack.config.prod.js
Remove references to ExtractTextPlugin
You loose the ability to "... ship a single CSS file in production instead of JS code injecting <style> tags..."

[D19cannon]

Sadly, the solution of @ademidun didn't work for me. Any other idea's how to solve this problem?

I have been trying to start / migrate react into an existing jquery project. So far I am able to solve most of the errors except this one...

Suggestions are more than welcome

[jrevillaa]

thanks @ademidun ... that works for me

[sinandomeng]

Hi all, it is very sad that I could not make it work on my project atm. I tried all of your answers here that solved your project but no luck. I really need a hand with this, can some one help?

ng -v

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

Angular CLI: 1.7.4
Node: 8.11.1
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular/platform-server: 6.1.2
@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.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack-dev-server: 2.11.2
webpack: 3.11.0

Note: I do both update the local and global packages for webpack and angular/cli
Note: This setup tells me to use webpack 4 in the console, but when I do it shows another error which is 'thisCompilation` (this thread title)

Working repo git clone https://github.com/smplyjr/my-angular-seo-3.git

[vvsashish]

I'm using angular cli version 7.1.4 .it is throwing me the same error
" Error - [webpack] TypeError: Cannot read property 'thisCompilation' of undefined
[10:37:42] Error - 'webpack' sub task errored after 52 ms
Cannot read property 'thisCompilation' of undefined".
Do I have to use angular [email protected] only?

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