react-plotly.js: JavaScript heap out of memory error with the quickstart Plot example.

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

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

Changing the lines in package.json worked for me as a hacky workaround:

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

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

Got it working similar to https://github.com/plotly/react-plotly.js/issues/135#issuecomment-501398125 (edit: by minimizing plotly, not using a script w/ cross-origin) , but using the files in plotly.js/lib directly to make a custom bundle. For example, if one wants to make a React component of just a scatter plot, make a file titled Plotly_scatter.js with the following lines:

import Plotly from 'plotly.js/lib/core'
import PlotlyScatter from 'plotly.js/lib/scatter'

Plotly.register(PlotlyScatter)

export default Plotly

Then, in a component file called Scatter.js, do:

import Plotly from 'path/to/Plotly_scatter'
import createPlotlyComponent from 'react-plotly.js/factory'
const Plot = createPlotlyComponent(Plotly)

And use it exactly as shown in the demo.

You can DIY your own bundle by doing the following (taken from plotly.js modules documentation):

// Load in the trace types for pie, and choropleth
import Plotly from 'plotly.js/lib/core'
// Register traces to Plotly core
Plotly.register([
    require('plotly.js/lib/pie'),
    require('plotly.js/lib/choropleth')
]);
// Export custom bundle
export default Plotly

If you’re using Typescript like myself, I ran into some trouble with the plotly.js definitions in DefinitelyTyped. In the repo, scatter.d.ts is defined, but importing scatter directly from lib throws an error about missing type definitions. Looking at it, I found that the type definitions are really sparse and only partially cover Plotly. To get around this, I opted for the hacky way and added "plotly.js/lib/core" (otherwise register() isn’t recognized) and a line for each "plotly.js/lib/<plot-type>" to the decs.d.ts file (I’m new to all of this, so there’s probably a more efficient module declaration). This is bad practice, but I’m not up to making the type defs myself.

All that said and done, using the specific parts of Plotly as needed does speed up the npm build by a lot (~15-25 seconds for one plot plots (I have since added more and it hasn’t affected the build time noticeably) down from 2-3 minutes), and I think this is a good way to apply React’s composition principle to Plotly.

Hope it helps someone.

Almost 2 years later and this issue still persists. dhamaniasad’s solution works but doesn’t feel sensible long term.

Finally, I updated to node 12.12, and it worked without @squeakycheese75’s fix.

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();
        }
      }
    ],

1. 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'
          }
        ])
//...
]

1. 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

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, We had similar issues here and the solution was to import the Plot component using lazy load.

First approach: lazy load within the desired page.

Before

/** ChartPage.js **/

import React from 'react'
import Plot from 'react-plotly.js'

const ChartPage = () => {
   return(
      <div>
        <Plot data={data} layout={layout} config={config} />   
      </div>
   )
   
 export default ChartPage

After

/** ChartPage.js **/

import React, {useMemo} from 'react'

const ChartPage = () => {

  const Plot = useMemo(() => {
    return React.lazy(() => import('react-plotly.js'));
  }, []);

   return(
      <div>
        <Plot data={data} layout={layout} config={config} />   
      </div>
   )
   
 export default ChartPage
  

---

Second approach: lazy load the entire page (Recommended)

Before

/** Router.js **/

import React from 'react'
import ChartPage from '../pages/ChartPage'

...
<Route path="/chart" component={ChartPage} />
...

After

/** Router.js **/

import React from 'react'

const ChartPage = React.lazy(() => import('../pages/ChartPage'))

...
<Route path="/chart" component={ChartPage} />
...

Both solutions solved the issue here, but the second one avoid glitches after the page has already been rendered.

using @squeakycheese75 method works but I cannot get a scatter3d chart to work this way. Are there some other parameters to createPlotlyComponent?

Nevermind, the basic dist does not have scatter 3d. I’m still stuck with this issue on Node version: 12.15.0, react-plotly.js: 2.4.0

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.

Is there a ELI5 of why this is happening?