Too many cpu and ram usage on production build

[Aspedm]

trafficstars

Hello. I have some problems with production build. react-scripts build use many ram, up to 9 GB.

Current environment:

• React. 17.0.1
• react-scripts 4.0.0
• Typescript 4.1.2

But this problem from react scripts 3.. , TS 4.0.* and react 16

I installed craco and add webpack bar. Build hangs on 90% and "additional chunk assets processing". In this time ram and cpu usage is increase.

Build result:

[shiggins21]

About 3 days ago we started experiencing the same issue. We have a CI/CD system that builds our frontend project and even with 8GB of memory allocated, our containers were consistently running out of memory after upgrading from 3.4.4 -> 4.0.0/4.0.1. Would love to know if there's a known cause for this issue or a known remedy.

[silltho]

I'm experiencing exactly the same, but only when running a production build on CircleCI.

I upgraded: TS: 3.x -> 4.1.2 React: 16.x -> 17.0.1

I had already updated cra to version 4.1 and it worked, upgrading typescript and react broke the build.

[ianschmitz]

Sorry to hear you're running into issues. Unfortunately we aren't able to assist folks who modify their webpack config using craco or similar tools. There's far too many variables for us at that point. If you can create a simple reproduction case with a vanilla CRA app, please feel to open new issue.

[Aspedm]

@ianschmitz You understand me incorrect. I installed craco only for check when build is hangs. On main branch cra config is clean, without any modified.

After just create app not use many ram, but for middle or large project used too many resource. This is more or less normal for local machine, but problem for remote dev instance or CI, where ram and cpu not so much.

[Yama-Tomo]

Same issue. Fail to build on CI due to huge memory usage.

I think it's probably due to EslintWebpackPlugin

my workaround is following

• use react-app-rewired
• remove EslintWebpackPlugin from webpack configuration in config-overrides.js

module.exports = {
  webpack: (config, env) => {
    if (env === 'production') {
      config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'ESLintWebpackPlugin')
    }

    return config
  }
}

[ianschmitz]

@Aspedm I suspect you were running into the eslint cache setting missing that was fixed in 4.0.1.

[Yama-Tomo]

@ianschmitz Same issue in 4.0.1.

Maybe this issue might helpful. https://github.com/webpack-contrib/eslint-webpack-plugin/issues/50#issuecomment-732376285

[Semigradsky]

my workaround is following

• use react-app-rewired
• remove EslintWebpackPlugin from webpack configuration in config-overrides.js

Also as temporary workaround you can specify previous version of eslint-webpack-plugin in package.json:

  "resolutions": {
    "eslint-webpack-plugin": "2.3.0"
  },

[jamiehaywood]

My GitHub Actions react-scripts build started failing recently, however interestingly it only broke when I copied serviceWorkerRegistration.ts and service-worker.ts from a newly created TS CRA4 (PWA version). Something to potentially debug would be the workbox stuff?

[ahrbil]

@jamiehaywood this workaround https://github.com/facebook/create-react-app/issues/10119#issuecomment-734184155 fixes the CI failing for me

[kalbert312]

We were getting

The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.

in our CI build after upgrading to 4.0.1. Patching the EslintPlugin options in react-scripts with the threads: false option OR downgrading eslint-webpack-plugin to 2.3.0 resolved the issue for us.

[Semigradsky]

threads was set to false by default in https://github.com/webpack-contrib/eslint-webpack-plugin/releases/tag/v2.4.1 So eslint-webpack-plugin updating should help.

[zoexx]

My GitHub Actions react-scripts build started failing recently, however interestingly it only broke when I copied serviceWorkerRegistration.ts and service-worker.ts from a newly created TS CRA4 (PWA version). Something to potentially debug would be the workbox stuff?

I got it, when you run build with node 12.8.1, it do not exit the process. I upgrade to 14 and all good now

[patheinen]

I got it, when you run build with node 12.8.1, it do not exit the process. I upgrade to 14 and all good now

To confirm this, I had the same issue running out of memory on CircleCI when upgrading to react-scripts 4.x and copying the new service worker files over like @jamiehaywood mentioned. Upgrading the node version used in my CircleCI container from 12.x -> the latest 14.16 LTS fixed the issue without needing to add a resolution. Additionally using 14.16 to build on my local machine dropped my react-scripts build time from +-220seconds to 30seconds.

[ShariqBinShoaib]

I am also experiencing same issue on my production server, when trying to build using github actions. And my app is very small with just 5 static pages.

Environment: React 17.0.1 React Scripts 4.0.1 Nodejs v14.16.0

[mareksuscak]

@ShariqBinShoaib you can try to disable Eslint, see: https://github.com/facebook/create-react-app/issues/10154#issuecomment-774454988

[smac89]

In the advanced configuration for CRA, there is also the option to disable source maps (GENERATE_SOURCEMAP=false), which they claim can help reduce OOM issues.

That may be worth a try if disabling eslint does not work for you

[arunkumarbrahmaniya]

We were getting

The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.

in our CI build after upgrading to 4.0.1. Patching the EslintPlugin options in react-scripts with the threads: false option OR downgrading eslint-webpack-plugin to 2.3.0 resolved the issue for us.

Hi @kalbert312 we are also facing the same issue, actually we are not understanding it. Can you please elaborate little more so that we can understand where we need to make these changes.

[akshayvijayjain]

anyone able to find any solution for this?

[naninmartins]

Hey @akshayvijayjain in my project I ejected cra to use a pure webpack setting. In resume I notice that cra use a huge quantity of libs and webpacks plugins to attend the major variety of cases in a project, but we not need of all libs in a real world, so the build and development is to heavy. When I ejected my project I could notice that neck was in the minification process then I changed some configs and got some interestings results. And the CRA project isn't maintained, so I recommend you updating them to tolls like pure webpack or vite.

Drawbacks: It's a learning curve to set a webpack but nothing out of reality