create-react-app: react-scripts 4.0.1 is very slow

If you use WSL, you should create a folder in WSL system (e.i. /home/user/folder), because /mnt/... is very slow. If you use remote server check its load with command htop. If it’s ok, your system is slow, upgrade it 😃

You just have to create a blank project using npx create-react-app slow-issues and start it using npm start.

I personally have around 7 seconds of compiling time on a blank project.

Version of CRA

npx create-react-app --version
npx : 67 installed within 7.081s
4.0.1

This is indeed a problem @ianschmitz, and I’ve confirmed what @imsandez reported above.

Also, I’ve opened an issue with the eslint-webpack-plugin since it’s originating from there.

Adding

  "resolutions": {
    "react-scripts/eslint-webpack-plugin": "2.3.0"
  }

At the end of package.json and yarn again will fix the issues. It is currently being discussed here: https://github.com/webpack-contrib/eslint-webpack-plugin/issues/52

@eek Thank you ! As a beginner, I’d specify the package.json file of the react-scripts dependancy in the node modules’ folder (I thought about the package.json file at the root of the project but of course it didn’t work). I followed your instructions:

1. set “threads: false” in react-scripts’ webpack.config.js
2. added “resolution” in react-scripts’ package.json file
3. npm install

Went from more than 2mins to start the project to 6s…thank you so much !

Hi guys, I don’t see any “threads: false” in my webpack.config.js file. Where can I find this? or where can I manually add it?

I know this has been there for 2 years, but I followed @eek 's answer and added :

in webpack.config.js of react-scripts package, I also added react-scripts/eslint-webpack-plugin :

And ran Npm install, I don’t know if that changed anything, but I went from 20+ min to run my app with npm start to ~2-3 min to run it.

Not yet optimal, but that’s way better.

I reinstall node js and it’s good

If you use WSL, you should create a folder in WSL system (e.i. /home/user/folder), because /mnt/... is very slow. If you use remote server check its load with command htop. If it’s ok, your system is slow, upgrade it 😃

thank you for the answer, but I noticed that the problem came from my operating system, by the way I was using windows 11, now I am going back to windows 10 and there is no more this problem thank you

If you use WSL, you should create a folder in WSL system (e.i. /home/user/folder), because /mnt/... is very slow. If you use remote server check its load with command htop. If it’s ok, your system is slow, upgrade it 😃

thank you for the answer, but I noticed that the problem came from my operating system, by the way I was using windows 11, now I am going back to windows 10 and there is no more this problem thank you

I think my laptop was slow, I bought it 7 years ago. The new one works perfectly fine and react scripts don’t have this problem anymore.

ok

Yes

If you use WSL, you should create a folder in WSL system (e.i. /home/user/folder), because /mnt/... is very slow. If you use remote server check its load with command htop. If it’s ok, your system is slow, upgrade it 😃

Same for me! Thaks fo the tip! WSL Ubuntu 20.04 on /mnt/...

@eek Thank you ! As a beginner, I’d specify the package.json file of the react-scripts dependancy in the node modules’ folder (I thought about the package.json file at the root of the project but of course it didn’t work). I followed your instructions:

1. set “threads: false” in react-scripts’ webpack.config.js
2. added “resolution” in react-scripts’ package.json file
3. npm install

Went from more than 2mins to start the project to 6s…thank you so much !