Increase JavaScript Heap Size in Create-React-App Project

Increase JavaScript Heap size in create-react-app project

Thanks a lot to @dan-abramov as his comment is the answer! (Give him the vote up in case you come across this).

You can just put e.g. node --max_old_space_size=4096 node_modules/.bin/react-scripts start in there instead of react-scripts start

Getting an out of memory error while using Create React App and Plotly.js

There are a couple issues reported regarding this exact problem on the repo issues tracking, like:

1. JavaScript heap out of memory error with the quickstart Plot example.
2. Javascript runs out of memory when making production build

In these issues, we clearly see this is a problem with NodeJS <= 10 memory allocation issue and there are several solutions to this:

Try to upgrade your NodeJS version to latest 12.x version

Node >= 12 increases the heap sizes automatically and it will work. I suggesst you install Node Version Manager (nvm) for Windows which will allow you quickly and easily install and switch through multiple node version.

Manually increase max_old_space_size to React scripts

Increase heap size using max_old_space_size by adding this option with a memory size into the package.json script:

"scripts": {
  ...
  "start": "react-scripts --max_old_space_size=4096 start",
  "build": "react-scripts --max_old_space_size=4096 build",
  ...
}

Use Partial bundles

Partial bundles

Starting in v1.15.0, plotly.js also ships with several partial bundles:

• basic
• cartesian
• geo
• ...

Starting in v1.39.0, each plotly.js partial bundle has a corresponding npm package with no dependencies.

Starting in v1.50.0, the minified version of each partial bundle is also published to npm in a separate "dist min" package.

plotly.js basic

The basic partial bundle contains trace modules scatter, bar and pie.

You can load the library from plotly.js-basic-dist which it's compiled and will consume less memory when bundling:

import React from "react";
// import Plot from "react-plotly.js";
import Plotly from "plotly.js-basic-dist";

import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);

---

Related Topics