JavaScript heap out of memory error with the quickstart Plot example.

[squeakycheese75]

I get the following error if i add a component with the quickstart and run npm start. I have the latest version of both react-plotly.js (2.3.0) and plotly.js (1.47.1)

`Compiling...

<--- Last few GCs --->

[17798:0x2708820] 469928 ms: Mark-sweep 1302.4 (1429.6) -> 1302.3 (1429.6) MB, 2350.9 / 0.0 ms allocation failure GC in old space requested
[17798:0x2708820] 472353 ms: Mark-sweep 1302.3 (1429.6) -> 1302.3 (1422.6) MB, 2425.0 / 0.0 ms last resort GC in old space requested
[17798:0x2708820] 474681 ms: Mark-sweep 1302.3 (1422.6) -> 1302.3 (1421.1) MB, 2327.7 / 0.0 ms last resort GC in old space requested

<--- JS stacktrace --->

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

0: ExitFrame [pc: 0x32090c30427d]

Security context: 0x38b7ade206a9
1: _append [/home/squeakycheese/Development/git/stockkly/node_modules/@babel/generator/lib/buffer.js:~112] [pc=0x32090ce90eef](this=0x56dca2fd981 ,str=0x3d2c8a736e69 <String[1]: >,line=48172,column=22,identifierName=0x3d2c8a702201 ,filename=0x3d2c8a702201 ,force=0x3d2c8a7022e1 )
2: word [/home/sque...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [node]
2: 0x876afc [node]
3: v8::Utils::ReportOOMFailure(char const*, bool) [node]
4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [node]
5: 0xdd42b1 [node]
6: v8::internal::Factory::NewUninitializedFixedArray(int, v8::internal::PretenureFlag) [node]
7: 0xdaf00f [node]
8: v8::internal::Runtime_GrowArrayElements(int, v8::internal::Object**, v8::internal::Isolate*) [node]
9: 0x32090c30427d`

[etpinard]

See plotly/plotly.js#3604

[benhastings]

Been experimenting with similar results.
I had a functional app (testing the waters with React by rewriting something from Angular) that I built by going through a few tutorials.

I switched to a fresh create-react-app and followed instructions for adding react-plotly.js & plotly-js and started getting the errors reported above.

After troubleshooting, I tried downgrading the plotly.js version and it's all working now.

I was using current (react-plotly.js: ^2.3.0, plotly.js: ^1.47.3) with 100% failure
downgraded to plotly.js: 1.45.3 and I'm back in business.

Wondering if there was some threshold crossed where the packages were too big from 1.45->1.47

[magamongo]

I faced a similar error with react-plotly.js (2.3.0) and plotly.js (1.47.3), but I could make it work by using yarn in place of npm(though still took more than 1 min for "yarn start"..).
Hope it helps :)

[dhamaniasad]

Got it to work by

<script crossorigin src="https://cdn.plot.ly/plotly-latest.min.js"></script>

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

[krimple]

We ran into the same issue in our test application. Switched to NodeJS 12.4.0 and webpack built without an out of memory error (so far). But it fails on node 11 and 10.

[squeakycheese75]

I got it working using exactly the same method as dhamaniasad. So only loading in from the basic-dist.

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

I also installed the basic package via npm
https://www.npmjs.com/package/plotly.js-basic-dist

[krimple]

Also, just launched via

node --max_old_space_size=4096 /path/to/nodejs/bin/yarn start

This was on 10.15.2. Node 12 increased the heap sizes automatically, which is why it worked.

[squeakycheese75]

I initially played around with changing the "max_old_space" but couldn't get it working. Also, it seemed a bit off having to increase the heap size just to load the simplest of charts.

[krimple]

did you use max_old_space_size rather than max_old_space? Just curious. I agree, it needs to be fixed so that this isn't a problem. Am worried that suddenly we'll run into this limit again when our code touches more of the library.

[squeakycheese75]

Apologies but I can't remember. It was a while ago when I found the above fix and gave up on adjusting the heap size.

[francesco-hayes]

Updating to the most recent version of Node 12+ helped allocated the heap size automatically as stated by @krimple earlier.

I then went with using the react-plotly.js-dist the same way @squeakycheese75 displayed his imports and now everything is working!

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

[MinskLeo]

Also, just launched via

node --max_old_space_size=4096 /path/to/nodejs/bin/yarn start

This was on 10.15.2. Node 12 increased the heap sizes automatically, which is why it worked.

So, another words saying: just update to NodeJS 12 and forget about this problem

[brianbancroft]

Does this mean that the current version of plot.ly is not compatible with React apps built on CRA running on LTS?

[jonyrock]

you may also hack a bit the build system with

1. npm run eject -- you will get the building sources of reaact
2. goto config/webpack.config.js and add

    externals: [
      function(context, request, callback) {
        if(irequest === 'plotly.js/dist/plotly') {
          callback(null, 'window.Plotly');
        } else {
          callback();
        }
      }
    ],

3. add to config/webpack.config.js also following

plugins: [
// ....
        new CopyPlugin([
          { 
            from: path.join(paths.appNodeModules, 'plotly.js', 'dist', 'plotly.min.js'),
            to: 'static/js'
          }
        ])
//...
]

4. in public/index.html add following <script type="text/javascript" src="%PUBLIC_URL%/static/js/plotly.min.js"></script>

something like this, I hope you got the idea

[rafaponieman]

Running into the exact same problem, it didn't happen using react-scripts 1.1.4, but it started happening when I updated to 2.1.8. Worked around it with @squeakycheese75's solution, thank you!