Very slow recompile times (~20 seconds)

Describe the bug

(Write your answer here.)

Hi, I’m trying to upgrade from 3.4.1 to 4.0.0 but I noticed that when I make a change it takes approx 20 seconds to recompile. With 3.4.1 it’s just a couple of seconds.

Did you try recovering your dependencies?

I deleted node_modules, yarn.lock, and installed the deps.

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Slow, compile time, recompile.

Environment

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 81.0
    Safari: 14.0
  npmPackages:
    react: ^17.0.1 => 17.0.1 (16.14.0)
    react-dom: ^17.0.1 => 17.0.1 (16.14.0)
    react-scripts: ^4.0.0 => 4.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. yarn start
2. change a file
3. observe the time it spends on “Compiling…”

Expected behavior

The recompile time should be almost instantaneous. It also takes a lot of time to start the first time (after yarn start)

Actual behavior

(Write what happened. Please add screenshots!) The app takes 20 seconds to recompile.

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.) Not available, I think it’s related to the size of my app (It’s 1012 files)

[vlad-khitev-axon]

Is there a way to completely remove ESLint from the dev compilation process? I believe many developers use ESLint as an IDE extension, so why do we need to duplicate it in react-scripts? I mean, every time developer saves a file, both IDE and react-scripts trigger their own ESLint process.

For me, it would be useful to run the lint command explicitly only in two situations: before a commit (lint-staged) and before a build (react-scripts).

[eek]

It’s because of the new threads implementation from eslint-webpack-plugin: https://github.com/webpack-contrib/eslint-webpack-plugin/issues/52#issuecomment-735684551

Reverting back to 2.3.0 should temporarily fix the issue. That can easily be done by adding at the end of package.json:

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

and yarn again. Re-compile time should be back to normal