Create-react-app: Dev server startup increased from 20 seconds to 2 minutes after upgrade to 4.0.0

[jurosh]

Describe the bug

Dev server startup time increased drastically after upgrade to 4.0.0 from 3.4.3. From 20 seconds to more than 2 minutes afte upgrade.

Did you try recovering your dependencies?

Removed all node_modules before upgrading.

Which terms did you search for in User Guide?

Did not find anything related to this issue - slow startup time of devserver.

Environment

  current version of create-react-app: 4.0.0

System:
    OS: Linux 5.4 Ubuntu 20.04 LTS
   CPU: (8) x64 Intel(R) Core(TM) i7-** CPU @ 1.80GHz
Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
npmPackages:
    react: 16.12.0 => 16.12.0 
    react-dom: 16.13.1 => 16.13.1 
    react-scripts: 4.0.0 => 4.0.0

   "typescript": "4.0.3",

Steps to reproduce

TBD - it might be somehow specific to our project. Which is medium size TypeScript project.

More info

I know that this report might be hard to reproduce and I will probably need to provide more information. But there also might be more people having same issue when comparing build/startup times and we might be able to figure out why is this happening - because this seems def as a bug, as build is incredibly slow now and this is blocker for upgrading to new version.

It might be related to project setup, but I dont have idea where to start debugging issue - maybe someone from maintainers will know what might be cause. And where to start look.

[jurosh]

Just found that there is closed issue with this problem https://github.com/facebook/create-react-app/issues/9886 Which seems to be related to eslint...

[krailler]

My production build is 3x slow on 4.0.0... And dev server startup is too slow... I saw that the map is generated on dev mode, is this the best? I guess that .map files are only usable on production build that is minified

[mareksuscak]

Our builds have slowed down considerably, too. In my opinion, eslint should NOT be a part of the dev build at all or at least should be configurable. These days, most devs run an eslint plugin in their IDE for a more integrated dev experience anyway. Another odd default is treating all eslint warnings as errors in a CI/CD environment without any way to opt out.

[krailler]

Disable eslint on dev server is the best way. We have eslint plugin on our IDE and also we have husky that checks the code before commit

[mareksuscak]

For anyone who finds this issue, here's how you can temporarily work around it using patch-package:

1. Set up patch-package
2. Create patches folder in your project root.
3. Create a new file inside the patches folder with a name react-scripts+4.0.0.patch:

diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index 80c6ac2..3420936 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -752,6 +752,7 @@ module.exports = function (webpackEnv) {
         formatter: require.resolve('react-dev-utils/eslintFormatter'),
         eslintPath: require.resolve('eslint'),
         context: paths.appSrc,
+        cache: true,
         // ESLint class options
         cwd: paths.appPath,
         resolvePluginsRelativeTo: __dirname,

1. Run yarn
2. You may need to add .eslintcache to .gitignore
3. Optionally start the server using FAST_REFRESH=true yarn start to enable Fast Refresh

[davidlukerice]

FWIW that patch increases my local npm start time from 45s to 55s in my current project (after an initial 2min start time without a cache file). CRA v3 had a 30s startup time.