Very slow recompile times (~20 seconds)

[FezVrasta]

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]

I have exactly the same problem. In a big TypeScript project (~1000 files) before upgrading to react-scripts@4 any code changes were applied immediately.

Any combination of TSC_COMPILE_ON_ERROR and FAST_REFRESH env variables doesn't affect the compilation time.

 System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Edge: Not Found
    Firefox: 80.0.1
    Safari: 13.1.2
  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

[balonsom]

I have the same problem, it takes around 20 seconds each time it recompiles. It was not happening on 3.4.1

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-1060NG7 CPU @ 1.20GHz
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Edge: Not Found
    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 
    react-scripts: 4.0.0 => 4.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

[jjhbw]

Same here, recompiles take several times as long as on 3.4.x

[MichaelBurgess]

Same here, I can't viably use 4.0.0 as it stands. Previously I'd get a reload of page in ~2 seconds after changing some code. Now takes ~45 seconds. Initial start time is also about 3-4x slower.

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
  Binaries:
    Node: 14.13.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Edge: Not Found
    Firefox: 81.0
    Safari: 14.0
  npmPackages:
    react: 16.14.0 => 16.14.0
    react-dom: 16.14.0 => 16.14.0
    react-scripts: 4.0.0 => 4.0.0
  npmGlobalPackages:
    create-react-app: Not Found

[ali-master]

Same here, Is there a way to solve this issue?

[FezVrasta]

Is anyone aware of a flag that can be set to make the yarn start command log verbose output? I'd like to understand what's the underlying issue but with the existing log there isn't any information available.

[paul-vd]

Having the same issue here 💤

Is anyone aware of a flag that can be set to make the yarn start command log verbose output? I'd like to understand what's the underlying issue but with the existing log there isn't any information available.

@FezVrasta not sure you can do that with a flag, but you can use patch-package to remove this line from react-scripts.
Or you could try one of these methods. I don't think the FORCE_COLOR works anymore.

UPDATE:

I disabled the fast refresh using FAST_REFRESH=false
I then tried injecting it into the webpack config using customise-cra with customize-cra-react-refresh, this is the method I used before cra v4.

The outcome is the same... 👎

Anyone using a rewired cra that is experiencing this problem?

[ali-master]

Having the same issue here 💤

Is anyone aware of a flag that can be set to make the yarn start command log verbose output? I'd like to understand what's the underlying issue but with the existing log there isn't any information available.

@FezVrasta not sure you can do that with a flag, but you can use patch-package to remove this line from react-scripts.
Or you could try one of these methods. I don't think the FORCE_COLOR works anymore.

UPDATE:

I disabled the fast refresh using FAST_REFRESH=false
I then tried injecting it into the webpack config using customise-cra with customize-cra-react-refresh, this is the method I used before cra v4.

The outcome is the same... 👎

Anyone using a rewired cra that is experiencing this problem?

I have your problem because I've used the react-app-rewired to customize the Create-react-app and I disabled the FAST_REFRESH but I got the same issue and every time I change my code, I have to wait for about 50 seconds to see my changes in the Browser.

[jmcpeak]

I believe the problem may be related to eslint as my IDE which runs eslint on a file save is slow at this task.

[werevamp]

@jmcpeak It was my .eslintrc.js file that was making everything slow for me. This may not work for everyone but it worked for me. I ended up commenting out a few libraries from my extends list and now it is much faster:

  extends: [
    'plugin:@typescript-eslint/recommended',
    // 'airbnb-typescript',
    // 'airbnb/hooks',
    // 'prettier',
    // 'prettier/react',
    // 'prettier/@typescript-eslint',
    // 'plugin:prettier/recommended',
  ],

[RubenMateus]

Same happening with a medium size project. Upgraded to v4 and its takes a bit more time to recompile. around 5-6s,
previous was almost instant.

[houmark]

I've also experienced slow recompile and the only "solution" which is of course not a solution, is to out-comment libraries/plugins.