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

yarn start
change a file
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)

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

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

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

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

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

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

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?

@FezVrasta

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.

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

@jmcpeak

@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',
  ],

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.

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

It may be a coincidence, but running eslint . takes 20 seconds too, so it looks like CRA is running ESlint from scratch on each file change, rather than using a partial approach or some kind of cache.

This is also in line with my observations.
For example, my PR #10265 did not even receive a single comment from the maintainers.
Also the number of ignored issues and PRs seems to be devastating.
It seems that Facebook has lost interest in cra, and now the project is sailing in "minimal maintenance mode".

@mareksuscak

@mareksuscak I do agree with you though in using nextjs when it is possible as a solution, about 80% of my projects run on nextjs and vercel, but yea still has that 20% percent that is dependant on cra. It would be created to see the same interactivity from the cra team as nextjs. Both teams have been innovative but yea nextjs takes the cake if you count the progress they made and the excellent dev experience they provide 🖥️

and same this is just my personal opinion. 😉

I just found out that on .env we can add DISABLE_ESLINT_PLUGIN=true

@aprilmintacpineda

@aprilmintacpineda That's a nice move. Really reduced the compile time

I cut down my HMR update time a lot by using craco to have a custom start script which disables ESLint without disabling it anywhere else (editor, husky git hooks, or any other tooling).

Install: npm i craco -S

craco.config.js:

module.exports = {
  eslint: {
    enable: false
  }
}

package.json:

  "scripts": {
    "start": "craco start",
    "start:eslint": "react-scripts start",
    "build": "react-scripts build",
    "lint": "eslint . --max-warnings 0"
  }

I will check out Next.js though. Maybe it's worth switching, i've used Next.js before, and only went with CRA because i didn't need any backend for my current project.

fix: slow recompile time (react#9911)

I'm using windows and yarn start is taking more than 15 minutes to run craco start

Adjust node_modules/react-scripts/config/webpack.config.js as mentioned here: #9886 (comment)

in my case change:

arround line 764

!disableESLintPlugin && new ESLintPlugin({

to

!disableESLintPlugin && isEnvProduction &&new ESLintPlugin({

You can auto patch the package using patch-package as i deed:
https://www.npmjs.com/package/patch-package

npx patch-package react-scripts

Greetings, i was using "react-scripts": "5.0.1". For development server it is taking high ram consumption of 3-4GB. After a single change system RAM is increasing to 5 GB and the server is stopping on complete RAM consumption, saying JavaScript heap out of memory. Also the recompiling time is varying between 8-15 seconds. why is it happening like this?

Somehow, switching from yarn to npm did the trick for me (although just deleting node_modules and re-installing may have also been helpful, but I didn't think to isolate that test).

CRA is dead.
I would like to step on its grave for the sake of others.
Unfortunately I am compiled to use this horrible tool as part of a huge project.
Non of the above helped me, using 4.0.3
setting DISABLE_ESLINT_PLUGIN=true should make #9886 (comment) redundant.
I have found that the problem lies in the TS warning dumps.
Tracing back to react-dev-utils/WebpackDevServerUtils.js

Jest will die soon as well IMO.
So long facebook tools 👎
Let's hope react will make it for a few more years...

From your wd:

git apply --directory=node_modules/react-dev-utils path/to/patch

Of course you can add a flag instead using process.env

diff --git a/WebpackDevServerUtils.js b/WebpackDevServerUtils.js
index 9dda650ee..e75a2320a 100644
--- a/WebpackDevServerUtils.js
+++ b/WebpackDevServerUtils.js
@@ -17,8 +17,6 @@ const prompts = require("prompts");
 const clearConsole = require("./clearConsole");
 const formatWebpackMessages = require("./formatWebpackMessages");
 const getProcessForPort = require("./getProcessForPort");
-const typescriptFormatter = require("./typescriptFormatter");
-const forkTsCheckerWebpackPlugin = require("./ForkTsCheckerWebpackPlugin");
 
 const isInteractive = process.stdout.isTTY;
 
@@ -141,25 +139,23 @@ function createCompiler({
 
   if (useTypeScript) {
     compiler.hooks.beforeCompile.tap("beforeCompile", () => {
-      tsMessagesPromise = new Promise((resolve) => {
-        tsMessagesResolver = (msgs) => resolve(msgs);
-      });
+      tsMessagesPromise = Promise.resolve();
     });
 
-    forkTsCheckerWebpackPlugin
-      .getCompilerHooks(compiler)
-      .receive.tap("afterTypeScriptCheck", (diagnostics, lints) => {
-        const allMsgs = [...diagnostics, ...lints];
-        const format = (message) =>
-          `${message.file}\n${typescriptFormatter(message, true)}`;
-
-        tsMessagesResolver({
-          errors: allMsgs.filter((msg) => msg.severity === "error").map(format),
-          warnings: allMsgs
-            .filter((msg) => msg.severity === "warning")
-            .map(format),
-        });
-      });
+    // forkTsCheckerWebpackPlugin
+    //   .getCompilerHooks(compiler)
+    //   .receive.tap('afterTypeScriptCheck', (diagnostics, lints) => {
+    //     const allMsgs = [...diagnostics, ...lints];
+    //     const format = message =>
+    //       `${message.file}\n${typescriptFormatter(message, true)}`;
+
+    //     tsMessagesResolver({
+    //       errors: allMsgs.filter(msg => msg.severity === 'error').map(format),
+    //       warnings: allMsgs
+    //         .filter(msg => msg.severity === 'warning')
+    //         .map(format),
+    //     });
+    //   });
   }
 
   // "done" event fires when webpack has finished recompiling the bundle.
@@ -176,11 +172,11 @@ function createCompiler({
     // https://github.com/facebook/create-react-app/issues/4492#issuecomment-421959548
     const statsData = stats.toJson({
       all: false,
-      warnings: true,
+      warnings: false,
       errors: true,
     });
 
-    if (useTypeScript && statsData.errors.length === 0) {
+    if (false && useTypeScript && statsData.errors.length === 0) {
       const delayedMsg = setTimeout(() => {
         console.log(
           chalk.yellow(
@@ -188,7 +184,6 @@ function createCompiler({
           )
         );
       }, 100);
-
       const messages = await tsMessagesPromise;
       clearTimeout(delayedMsg);
       if (tscCompileOnError) {

This is even easier

diff --git a/WebpackDevServerUtils.js b/WebpackDevServerUtils.js
index 9dda650ee..02bb745b2 100644
--- a/WebpackDevServerUtils.js
+++ b/WebpackDevServerUtils.js
@@ -111,6 +111,8 @@ function createCompiler({
   tscCompileOnError,
   webpack,
 }) {
+  // kill TS dev errors and warnings
+  useTypeScript = false;
   // "Compiler" is a low-level interface to webpack.
   // It lets us listen to some events and provide our own custom messages.
   let compiler;

fix: slow recompile time (react#9911)

all work for me after add typescript in devDependencies (recompile times in (~7 seconds)

my package.json bellow

{
  "name": "auth-front-atem",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.8.4",
    "@mui/lab": "^5.0.0-alpha.93",
    "@mui/material": "^5.9.3",
    "@mui/system": "^5.9.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/lodash.debounce": "^4.0.7",
    "@types/node": "^16.11.47",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@types/react-router-dom": "^5.3.3",
    "axios": "^0.27.2",
    "colorize-filter": "^1.0.3",
    "formik": "^2.2.9",
    "framer-motion": "^7.0.0",
    "inversify": "^6.0.1",
    "jwt-decode": "^3.1.2",
    "lodash.debounce": "^4.0.8",
    "notistack": "^2.0.2",
    "react": "^18.2.0",
    "react-code-input": "^3.10.1",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.0",
    "react-scripts": "5.0.1",
    "react-spring": "^9.6.1",
    "reflect-metadata": "^0.1.13",
    "universal-cookie": "^4.0.4",
    "use-media": "^1.4.0",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "cross-env": "^7.0.3"
  }
}

Navigation Menu

Repository navigation

Very slow recompile times (~20 seconds) #9886

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

UPDATE:

UPDATE:

61 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Very slow recompile times (~20 seconds) #9886

Description

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

Activity

vlad-khitev-axon commented on Oct 24, 2020

balonsom commented on Oct 24, 2020

jjhbw commented on Oct 24, 2020

MichaelBurgess commented on Oct 24, 2020

ali-master commented on Oct 24, 2020

FezVrasta commented on Oct 24, 2020

paul-vd commented on Oct 24, 2020

UPDATE:

ali-master commented on Oct 24, 2020

UPDATE:

jmcpeak commented on Oct 24, 2020

werevamp commented on Oct 24, 2020

RubenMateus commented on Oct 24, 2020

houmark commented on Oct 25, 2020

FezVrasta commented on Oct 25, 2020

61 remaining items

fkirc commented on Jan 29, 2021

paul-vd commented on Jan 29, 2021

aprilmintacpineda commented on Feb 19, 2021

DungRaymond commented on Mar 5, 2021

FunctionDJ commented on Mar 30, 2021

ndukachukz commented on Oct 8, 2021

Digiraf commented on May 10, 2022

chaitanya71998 commented on Apr 4, 2023

infomus commented on May 10, 2023

ShaMan123 commented on May 19, 2023

ShaMan123 commented on May 19, 2023

jonathasborges1 commented on Jul 6, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions