yarn build in ReactJS, Allocation failed - JavaScript heap out of memory

Question

In local enviroments I have no problem, but running a production enviroment on jenkins with this script it does:

yarn install --production
yarn build

The build takes like 5 minutes, in the end, jenkins exit with this console output error:

+ yarn install --production
yarn install v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
warning " > [email protected]" has unmet peer dependency "popper.js@^1.14.7".
warning " > [email protected]" has incorrect peer dependency "react@~0.14.8 || ^15.0.0".
warning " > [email protected]" has incorrect peer dependency "react-dom@~0.14.8 || ^15.0.0".
warning " > [email protected]" has incorrect peer dependency "react@^15.4.2".
warning " > [email protected]" has unmet peer dependency "prop-types@^15.0.0".
warning " > [email protected]" has unmet peer dependency "prop-types@^15.0.0".
warning " > [email protected]" has unmet peer dependency "prop-types@^15.0.0".
warning " > [email protected]" has unmet peer dependency "prop-types@^15.5.4".
warning " > [email protected]" has incorrect peer dependency "react@^0.14.3".
warning " > [email protected]" has incorrect peer dependency "react-dom@^0.14.3".
warning " > [email protected]" has incorrect peer dependency "react-widgets@^4.2.2".
warning " > [email protected]" has incorrect peer dependency "react-widgets@^4.2.2".
warning " > [email protected]" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0".
warning "react-styleguidist > [email protected]" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning "react-styleguidist > [email protected]" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
[4/4] Building fresh packages...
Done in 28.04s.
+ yarn build
yarn run v1.9.4
$ react-scripts build
Creating an optimized production build...

<--- Last few GCs --->

[31498:0x2ab86d0]   229792 ms: Mark-sweep 1277.3 (1459.7) -> 1277.2 (1461.7) MB, 1801.1 / 0.0 ms  allocation failure GC in old space requested
[31498:0x2ab86d0]   231676 ms: Mark-sweep 1277.2 (1461.7) -> 1277.0 (1420.7) MB, 1884.4 / 0.0 ms  last resort GC in old space requested
[31498:0x2ab86d0]   233210 ms: Mark-sweep 1277.0 (1420.7) -> 1277.0 (1419.2) MB, 1533.2 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0xb1707c25879 <JSObject>
    0: builtin exit frame: stringify(this=0xb1707c090a9 <Object map = 0x123a95202ba1>,0x11b5562822d1 <undefined>,0x11b5562822d1 <undefined>,0x26b024683529 <Object map = 0x2449e8a328d1>)

    1: arguments adaptor frame: 1->3
    2: toString [0x11b5562822d1 <undefined>:9522] [bytecode=0xf76e19f6a69 offset=28](this=0xb3c89b82b29 <Object map = 0x306621cb3d19>)
    7: /* anonymous */(aka /* anonymous ...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [node]
 2: 0x8c21ec [node]
 3: v8::Utils::ReportOOMFailure(char const*, bool) [node]
 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [node]
 5: v8::internal::Factory::NewRawOneByteString(int, v8::internal::PretenureFlag) [node]
 6: v8::internal::String::SlowFlatten(v8::internal::Handle<v8::internal::ConsString>, v8::internal::PretenureFlag) [node]
 7: v8::internal::JsonStringifier::SerializeString(v8::internal::Handle<v8::internal::String>) [node]
 8: v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<true>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
 9: v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
10: v8::internal::JsonStringifier::Stringify(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [node]
11: v8::internal::Builtin_JsonStringify(int, v8::internal::Object**, v8::internal::Isolate*) [node]
12: 0x14795198697d
error Command failed with exit code 1.

The only change that started to generate this error was the adition of 2 node dependencies:

"react-accessible-accordion": "^3.0.0",
"react-simple-collapse": "^0.1.2",

The full package.json is this:

{
  "name": "front-master",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@blueprintjs/core": "^2.3.1",
    "@blueprintjs/select": "^2.0.1",
    "@esri/arcgis-to-geojson-utils": "^1.3.0",
    "@kenshooui/react-multi-select": "^1.1.5",
    "antd": "^3.12.1",
    "async": "^2.6.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.2",
    "classnames": "^2.2.6",
    "esri-loader": "^2.4.0",
    "fetch-jsonp": "^1.1.3",
    "globalize": "^1.4.2",
    "google-maps-react": "^1.1.11",
    "highcharts": "^6.1.1",
    "moment": "^2.22.2",
    "npm": "^6.2.0",
    "react": "^16.4.1",
    "react-accessible-accordion": "^3.0.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-autosuggest": "^9.4.3",
    "react-beautiful-dnd": "^10.0.4",
    "react-bootstrap-table-next": "^3.1.2",
    "react-bootstrap-table2-paginator": "^2.0.6",
    "react-bootstrap-table2-toolkit": "^1.4.2",
    "react-color": "^2.14.1",
    "react-csv": "^1.0.15-RC2",
    "react-custom-scrollbars": "^4.2.1",
    "react-data-export": "^0.5.0",
    "react-datepicker": "^2.8.0",
    "react-dom": "^16.4.1",
    "react-export-excel": "^0.5.3",
    "react-intl": "^2.4.0",
    "react-lineto": "^3.1.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^1.1.4",
    "react-select": "^2.0.0",
    "react-simple-collapse": "^0.1.2",
    "react-sortable-hoc": "^0.8.3",
    "react-transition-group": "^2.4.0",
    "react-widgets": "^5.0.0-7",
    "react-widgets-globalize": "^5.0.20",
    "react-widgets-moment": "^4.0.27",
    "reactstrap": "^5.0.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.3.0",
    "terraformer-wkt-parser": "^1.2.0",
    "video-react": "^0.14.1",
    "x2js": "^3.2.1",
    "xlsx": "^0.14.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "eslint-plugin-react-hooks": "^1.3.0",
    "react-docgen": "^2.21.0",
    "react-styleguidist": "^7.1.0"
  }
}

EDIT: Also, I got this warning from github when I pushed my branch

So I checked yarn.lock and I can see that the version there is:

mem@^1.1.0:
  version "1.1.0"

But how could I upgrade a dependency that is not defined on package.json ?

Sponger

This comment for them who came here with CRA v5, Webpack 5 and CRA v5 don't add fallbacks for nodejs modules any more, see this link for fixes github.com/facebook/create-react-app/issues/11756 – Issuant

Answer 1

Finally, I use this:

https://mcmap.net/q/270451/-increase-javascript-heap-size-in-create-react-app-project

In my package.json the script for build:

"build": "react-scripts --max_old_space_size=4096 build"

Sponger

This is the solution – Albigenses

Getting FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory – Gland

Answer 2

If you use a server with less memory (512MB) you need set try two things:

1 - Set less memory on react-scripts

"build": "react-scripts --max_old_space_size=256 build"

2 - You can disable generation of source maps as described in https://create-react-app.dev/docs/advanced-configuration put in .env file:

GENERATE_SOURCEMAP=false

Tightwad

Disabling sourcemap generation in production and staging solved it for us! As a matter of fact it is a desirable outcome for those environments not to have sourcemaps! Since we do the build locally on the machine that serves the build, it is rare to dedicate more than 1 or 2 GB of RAM for small Node.js web apps with a React frontend. – Viva

the second step of updating env variable worked for me – Liris

for ubuntu 18.04 aws ec2 server, this is the only solution for latest, "build": "react-app-rewired --max_old_space_size=256 build" – Silique

First variant (max_old_space_size=256) gives me FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory – Gland

Second variant (sourcemap) gives me FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory – Gland

If not solved your problem, try use less memory. Try use --max_old_space_size=128 – Tightwad

Answer 3

Sometimes increasing the memory allocation for node.js is not the solution you need. The most common culprit for this is caused by recursion which can arise from cyclic dependencies.

Madge is a tool that can help you detect when you have a cyclic dependency in your Nodejs/React Application

Add to your script

npm i -g madge

"madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",

Ballplayer

Thank you, that fixed it for me. Had lots of circular dependencies. It still built on my machine, just not on the server - Seems more memory adds some tolerance. – Mantegna

Answer 4

In my case I do this and it works Linux/macOS

export NODE_OPTIONS=--max-old-space-size=8192

please refer this URL

Landwehr

Answer 5

Maybe the 2 dependencies you added use lot of memory, it would explain the error you get from jenkins. Did you try to increase the memory allocated to jenkins as explained here?

Hope it will help you!

Thordia

I tried to increase the memory for node with something like: node --max-old-space-size=8192 but there I need the name of the file that I'm building. But I can't have the name before generating, it's something like build.asdasdaq3d23nk2.js – Sponger

yeah in my case the aws npm packages were the culprit – Drear

Answer 6

It seems that my case is ridiculous but I had to replace the 32-bit node with a 64-bit node.

Maurilla

Answer 7

Doing npm cache clean --force resolve the problem for me

Burnt

If you're not posting a fully explanatory answer, please post suggestions such as this as comments – Manolo

Answer 8

I was also facing same issue change your heap & build memory through package.json file simple change script lines to this:

   "start": "react-scripts --max_old_space_size=4096 start",
   "build": "react-scripts --max_old_space_size=4096 build",

I got this solution from boldreports

Licit

Answer 9

For anyone stumbling upon this error, while using react-i18next with TypeScript types:

Having a translation file with just an empty object led to the "heap out of memory" error.

Breaks:

export const EN_GB = {}

Works:

export const EN_GB = {
  dummy: 'dummy'
}

Schaffner

Answer 10

I faced the same issue today. My code works fine when i run in local machine. But when i deploy it to netlify it shows the error you have mentioned above.

I have tried setting "max_old_space_size" variable and some other answers on other posts. But none of them worked for me.

In my case, my node version in local machine differs from netlify site version.

So I edited environment variable with my local machine node version and the build is succesfully completed.

Patentor

Answer 11

I could fix it for one of my project like this :

On a newly created git branch run :

npm run eject

This will create many files and update your package json (the start/test/build commands if you haven't changed them).

Go to config/webpack.config.js and update the TerserPlugin options properties "compress" and "mangle" :

new TerserPlugin({
   terserOptions: {
      ...
      compress: false,
      mangle: true,
      ...

This has decreased drastically build time and memory usage... The tradeoff is a slightly bigger build file (went from 2.3Mo to 2.6Mo for my project). So you should consider if it fits for your project in case of performance constraints.

Why this change ? I tried this because of the following info in the Terser documentation :

It's not well known, but whitespace removal and symbol mangling accounts for 95% of the size reduction in minified code for most JavaScript - not elaborate code transforms.

If you want to "revert" the eject command : https://mcmap.net/q/419993/-undo-39-npm-run-eject-39-in-react

Semilunar