react-scripts 4.0.1 is very slow

[amaleky]

Describe the bug

react-scripts 4.0.1 is very slow on start and reload, by and without FAST_RELOAD, yarn start takes more than 2 minute now after update.

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

Ubuntu v20.10
Node v12.18.2 LTS
yarn v1.22.5

Steps to reproduce

1. update react-scripts to v4.0.1
2. using typescript
3. large scale project

[ianschmitz]

Unfortunately without any sort of reproduction steps we can't help diagnose the slow compilation you're experiencing. You may want to take a look at #9886 to see if you're experiencing the same issues, and post your findings in there.

[imsamdez]

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

[eek]

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: webpack-contrib/eslint-webpack-plugin#52

[dkm94]

@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 !

[zhyrzh]

@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?

[toutpuissantged]

my react-script is too slow help me

[FrameMuse]

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 :)

[toutpuissantged]

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

[MatrixFrog]

I've already changed my start script to

  ...
  "scripts": {
    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
  },

to skip linting entirely, so then I assume the

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

change wouldn't affect startup time in my case?

[dkm94]

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.

[toutpuissantged]

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

[FrameMuse]

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

[toutpuissantged]

I reinstall node js and it's good

[packetspy]

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/...

[Toorain]

@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.