Cannot read property 'thisCompilation' of undefined during npm run build

[jsrawan-mobo]

I've been running react-scripts build in docker for last 3 months and suddenly our builds started failing this week (without any change in the package.json dependencies)

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes, using nvm with node 6.11.1 and npm 3.10.10

Which terms did you search for in User Guide?

using npm run build, not using anythin relevant

Environment

1. node -v: 6.11.1
2. npm -v: 3.10.10
3. yarn --version (if you use Yarn): N/A
4. npm ls react-scripts (if you haven’t ejected):

Then, specify:

1. Operating system: Debian 9.3 (Docker nginx:1.13)
2. Browser and version (if relevant): N/A

Steps to Reproduce

apt-get -y update
apt-get -y install curl
apt-get -y install gnupg
apt-get -y install gnupg1 gnupg2 procps
curl -sL https://deb.nodesource.com/setup_6.x | bash -
apt-get -y install nodejs
curl https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash -
source ~/.nvm/nvm.sh
nvm list
nvm install v6.11.1
npm install
npm rebuild node-sass --force
CI="" npm run build

Expected Behavior

Creating an optimized production build...
File sizes after gzip:

341.23 KB build/static/js/main.0a9ca280.js
35.24 KB build/static/css/main.7b053899.css
...

Actual Behavior

Creating an optimized production build...
Failed to compile.

Cannot read property 'thisCompilation' of undefined

npm ERR! Linux 4.9.60-linuxkit-aufs

...

npm-debug.log

Reproducible Demo

TBD - will try to create a docker with mock project.

[akhil-ga]

I got this after using npm install. Installing using yarn removed this error for me.

[NickFoden]

TLDR: Error " Cannot read property 'thisCompilation' of undefined " in our React app (CRA initialization)- was additional install of dependency of webpack. Remove node_modules. Remove webpack in package.json. Yarn install. Good to go.

After npm run start was unable to compile. I had the error "Cannot read property 'thisCompilation' of undefined" within React app created with Create React App and error code ELIFECYCLE part of log here:
error code ELIFECYCLE
21 error errno 1
22 error icon@0.1.0 start: react-scripts start
22 error Exit status 1
23 error Failed at the icon@0.1.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

At first thought it was older semantic-ui running gulp-util but then we had "webpack" installed as a dependency in the package.json, which I believe after comparing to other repos built with CRA, is unnecessary dependency. 1. Removed node-modules and lockfiles and the "webpack" dependency. 2. Yarn install. 3. And npm run start no problem now.

[DmitryOlkhovoi]

having this error with webpack 4 and storybook
works with webpack 3

@NickFoden so you suggest using Yarn? What if I don't want to use it?

[Timer]

Please file this bug with npm, it sounds like a bug in their package resolution algorithm. You can use Yarn in the meantime.

[Rukeith]

@Timer I use yarn and still got this error

[Timer]

Can someone please provide a small reproducible demo?

[kajohnsonjd]

Also ran into this.

[mirik999]

Installing using yarn removed this error for me too.

[eakarpov]

Just stay on the 3.0.2 version of the plugin for being compatible with webpack 3.x.

[gaearon]

I'm going to close because there were no reproducible examples shared.

To solve this problem:

• Delete node_modules
• Delete package-lock.json if present
• If you have react-scripts in package.json, make sure you don't have webpack in it
• Run yarn (or npm install)
• Also make sure you don't have package.json or node_modules in the parent folders of your project

[davejm]

I also got this error and install using yarn instead of npm worked

[zackify]

If you're like me and have a build task using webpack v4 inside a CRA, turns out npm doesn't know how to let react-scripts depend on its own webpack version.

As @davejm said, yarn works correctly.

[harish-aka-shivi]

As gaearon said, following steps worked for me:

• Removing node_modules
• removing webpack from package.json dependencies
• and npm install

[DamianRivas]

Just uninstall webpack with npm remove webpack, and install webpack 3 with npm i webpack@3.11.0. No need to commit to yarn if you're not already using it like me. A similar issue was reported over at Angular: angular/angular-cli#9794

[gaearon]

Create React App users never need to install webpack unless they’ve ejected. I want to make it clear to future readers.

[MichaelPalmer-Orange]

I ran into this similar issue, mainly because in a bad move, I had (not realizing I didn't need to install it) installed webpack to a higher version that what Create React App was expecting. Then, I uninstalled it, and ran into a different issue of missing webpack.

Finally resolved it by installing the version of webpack suggested above, 3.11.0

[gaearon]

If you use Create React App you don't need to install webpack at all, and you're just going to keep hitting issues if you do. I don't know how else to put this. I keep writing about this in every comment, and people still ignore it. 😞

As I explained above you need to completely remove webpack from your package.json if you have react-scripts there, and then delete node_modules and re-run Yarn (or npm).

Let's try again for future readers:

You cannot have both webpack and react-scripts in your package.json. It will not work and is not supported. You need to follow the instructions in #4076 (comment). Thanks!

[gaearon]

I'm locking because new comments just add confusion for future readers who are going to try wrong workarounds. If you experience this, and the suggestions in #4076 (comment) don't help, please file a new issue.

Note that the instructions #4076 (comment) only apply to users who have react-scripts in their package.json. If you don't (for example, you may find this page by googling for the error message, but you don't have react-scripts in package.json), this thread is not for you because it's specific to Create React App users.