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

Question

<--- Last few GCs --->

[972:000001913A837320]    40900 ms: Mark-sweep 2049.2 (2066.3) -> 2047.3 (2059.3) MB, 2062.9 / 0.1 ms  (+ 179.6 ms in 113 steps since start of marking, biggest step 8.9 ms, walltime since start of marking 2512 ms) (average mu = 0.153, current mu = 0.107) [972:000001913A837320]    42835 ms: Mark-sweep 2048.8 (2059.3) -> 2047.7 (2057.8) MB, 1845.1 / 0.0 
ms  (+ 81.8 ms in 23 steps since start of marking, biggest step 9.0 ms, walltime since start of marking 1935 ms) (average mu = 0.084, current mu = 0.004) al

<--- JS stacktrace --->

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

    0: ExitFrame [pc: 00007FF68A20B3BD]
Security context: 0x002c4c9808d1 <JSObject>
    1: _append [000002A11D9F9439] [D:\ReactProjects\plotlytest\myplotlysite\node_modules\@babel\generator\lib\buffer.js:~99] [pc=0000014BCF9DB744](this=0x03160f6401b1 <Buffer map = 000000A495510339>,0x02ab7a1c78c9 <String[#1]:  >,151182,27,0x02ab7a1c01b9 <null>,0x02ab7a1c04b1 <undefined>,0x02ab7a1c06e9 <false>)
    2: append [000002A11D9F9391] [D:\ReactPro...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF6895F5EBF napi_wrap+114095
 2: 00007FF6895A0B46 v8::base::CPU::has_sse+66998
 3: 00007FF6895A1946 v8::base::CPU::has_sse+70582
 4: 00007FF689DB6E4E v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF689D9EF21 v8::SharedArrayBuffer::Externalize+833
 6: 00007FF689C6B18C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
 7: 00007FF689C763C0 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
 8: 00007FF689C72EE4 v8::internal::Heap::PageFlagsAreConsistent+3204
 9: 00007FF689C686E3 v8::internal::Heap::CollectGarbage+1283
10: 00007FF689C66D54 v8::internal::Heap::AddRetainedMap+2452
11: 00007FF689C8809D v8::internal::Factory::NewFillerObject+61
12: 00007FF6899EE06F v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1295
13: 00007FF68A20B3BD v8::internal::SetupIsolateDelegate::SetupHeap+546637
14: 0000014BCF9DB744
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Above is the error I am recieving. I followed a pretty standard set-up, identical to the one listed on this site: https://github.com/plotly/react-plotly.js/blob/master/README.md

I created a react app. When I create a react app and "npm start" the local host it works perfectly fine. This error occurs when I do the next step:

"npm install react-plotly.js plotly.js" after I do this, the local host no longer works and I get this error.

How can I fix this?

By the way, I'm curious, why does this error still exist for so many years? Is plotly not well for react or something?

Answer 1

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);