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

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 fsevents#1.2.9: The platform "linux" is incompatible with this module.
info "fsevents#1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > bootstrap#4.3.1" has unmet peer dependency "jquery#1.9.1 - 3".
warning " > bootstrap#4.3.1" has unmet peer dependency "popper.js#^1.14.7".
warning " > google-maps-react#1.1.11" has incorrect peer dependency "react#~0.14.8 || ^15.0.0".
warning " > google-maps-react#1.1.11" has incorrect peer dependency "react-dom#~0.14.8 || ^15.0.0".
warning " > react-addons-css-transition-group#15.6.2" has incorrect peer dependency "react#^15.4.2".
warning " > react-bootstrap-table-next#3.1.5" has unmet peer dependency "prop-types#^15.0.0".
warning " > react-bootstrap-table2-paginator#2.0.7" has unmet peer dependency "prop-types#^15.0.0".
warning " > react-bootstrap-table2-toolkit#1.4.2" has unmet peer dependency "prop-types#^15.0.0".
warning " > react-intl#2.9.0" has unmet peer dependency "prop-types#^15.5.4".
warning " > react-simple-collapse#0.1.2" has incorrect peer dependency "react#^0.14.3".
warning " > react-simple-collapse#0.1.2" has incorrect peer dependency "react-dom#^0.14.3".
warning " > react-widgets-globalize#5.0.20" has incorrect peer dependency "react-widgets#^4.2.2".
warning " > react-widgets-moment#4.0.27" has incorrect peer dependency "react-widgets#^4.2.2".
warning " > eslint-plugin-react-hooks#1.6.1" has unmet peer dependency "eslint#^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0".
warning "react-styleguidist > uglifyjs-webpack-plugin#1.2.7" has unmet peer dependency "webpack#^2.0.0 || ^3.0.0 || ^4.0.0".
warning "react-styleguidist > webpack-dev-server#2.11.5" 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 ?

Answer 1

Finally, I use this:
https://stackoverflow.com/a/55378108/3541320
In my package.json the script for build:
"build": "react-scripts --max_old_space_size=4096 build"

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

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 .",

Answer 4

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!

Answer 5

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

Answer 6

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

Answer 7

In my case I do this and it works
Linux/macOS
export NODE_OPTIONS=--max-old-space-size=8192
please refer click on this URL

Answer 8

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.

Answer 9

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://stackoverflow.com/a/54248621/4739462