Error while plotting after React update

[jimbru]

Under certain circumstances, after a React update, the <Plot ../> component will throw the following error:

factory.js:131 Error while plotting: Error: DOM element provided is null or undefined
    at Object../node_modules/plotly.js/src/lib/get_graph_div.js.module.exports [as getGraphDiv] (get_graph_div.js:32)
    at Object../node_modules/plotly.js/src/plot_api/plot_api.js.Plotly.react (plot_api.js:2222)
    at factory.js:107
    at <anonymous>

I added some logging into factory.js to try and debug (modified factory.js attached below). Here's the output:

My hypothesis is that if Reacts attempts to update the component quickly enough, the promise scheduled in willComponentUpdate (https://github.com/plotly/react-plotly.js/blob/master/src/factory.js#L100) may be called after React calls getRef with null and before it gets called again with the newly rendered div.

---

Chrome 64.0.3282.167 Mac
plotly.js 1.34.0
react-plotly.js 1.6.0

factory.js.txt

[nicolaskruchten]

Thanks for the bug report! I'll try to replicate and add some guards here so that we don't try to render on a null ref :)

[nicolaskruchten]

Is this still an issue with version 2.0.0? I haven't been able to replicate it...

[paulboocock]

This still appears to be an issue. If I conditionally render the Plot, say I remove it from the DOM whilst the API is being called to show a loading screen, then this console error occurs.

Chrome 65.0.3325.181 Windows
react 15.6.1
plotly.js 1.35.2
react-plotly.js 2.1.0

[d-weeteling]

disclaimer1: I'm somewhat of a react newbie

dsiclaimer2: This solution appeared to be incomplete for our project: it lead to some new problems.

Last thursday, I got a project to repair/improve which had exactly this bug: I solved (=circumvented) this as follows: the returned component (parent) in my render fn attaches the <Plot ...> component (child) after the parent fn componentDidMount is called. I did this using reactDOM.findDOMNode and reactDOM.render. relevant code:

componentDidMount() {
  const Plot = plotComponentFactory(window.Plotly);
  const plot = (
    <Plot
      data={this.state.combinedEvents}
      layout={this.getLayout(this.state.wantedAxes)}
      config={{ displayModeBar: false }}
    />
  );
  const that = this;
  setTimeout(() => {
    const container = ReactDOM.findDOMNode(that);
    ReactDOM.render(plot, container);
  }, 50);
}

Versions:

Chromium: v58.0.3029.110 Built on Ubuntu
react: v16.0.0
react-plotly.js: v1.7.0

[nicolaskruchten]

@paulboocock thanks for the confirmation! Would it be possible for you to show me a minimal example that reproduces this, possibly a CodePen or something? I can't reproduce it on my end and I'm not clear on what you mean by "If I conditionally render the Plot, say I remove it from the DOM whilst the API is being called to show a loading screen" ... How are you removing from the DOM, and which API are you referring to?

[steventebrinke]

This seems to happen when you update the props before the render is ready. For example, in our app we calculate the dimensions once the page has been loaded, but this sometimes causes the Plot to be rendered twice: once with the incorrect dimensions, which fails with the mentioned error, and once with the correct dimensions. Since the second render succeeds, the UI looks correct even though an error is logged in the console.

[seangarita]

I too am running into this issue. Has anybody figured out a good way to catch it?

[babloo80]

Hello there,
I am seeing this issue as well. And here is the error stack I got...
Error while plotting: Error: DOM element provided is null or undefined at Object.module.exports [as getGraphDiv] (plotly.js:128473) at Object.exports.react (plotly.js:136131) at factory.js:142 function.console.(anonymous function) @ index.js:1452 (anonymous) @ factory.js:155 Promise.catch (async) componentWillUpdate @ factory.js:154 updateClassInstance @ react-dom.development.js:13308 updateClassComponent @ react-dom.development.js:14914 beginWork @ react-dom.development.js:15757 performUnitOfWork @ react-dom.development.js:18761 workLoop @ react-dom.development.js:18802 renderRoot @ react-dom.development.js:18881 performWorkOnRoot @ react-dom.development.js:19788 performWork @ react-dom.development.js:19695 performSyncWork @ react-dom.development.js:19668 interactiveUpdates$1 @ react-dom.development.js:19978 interactiveUpdates @ react-dom.development.js:2328 dispatchInteractiveEvent @ react-dom.development.js:5141

Versions:
"plotly.js": "^1.42.2", "react": "^16.7.0-alpha.0", "react-dom": "^16.7.0-alpha.0", Chrome: Version 70.0.3538.77

[ArcticTee]

Bump

[nicolaskruchten]

@antoinerg can you take a look at this please?

[brammitch]

Edit: After testing, I realized this only works on the initial render. Subsequent renders, when the LoadingSpinner component is rendered in place of the PlotlyChart component, the error will reappear.

I've had this error for awhile now and finally came up with a workaround by using code-splitting with React.lazy and Suspense from React 16.6. Here's an oversimplified example:

Before (with "DOM element provided is null or undefined" error)

import React, {Component} from 'react';
import PlotlyChart from './PlotlyChart';
import LoadingSpinner from './LoadingSpinner';

export class Dashboard extends Component {
  /* ... */
  render() {
    /* ... */
    return (
      <div>
        {this.props.loading ? (
          <LoadingSpinner />
        ) : (
          <PlotlyChart divId="dashboardChart" />
        )}
      </div>
    );
  }
}

Redux is used to track when all the data from our API has finished loading, and then render the PlotlyChart component. However, while the component was waiting for the API to finish, it would still load in the background. Since there would be no valid div to render to, the PlotlyChart component would throw an error.

After (no more errors!)

import React, {Component, Suspense} from 'react';
import LoadingSpinner from './LoadingSpinner';
const PlotlyChart = React.lazy(() => import('./PlotlyChart'));

export class Dashboard extends Component {
  /* ... */
  render() {
    /* ... */
    return (
      <div>
        {this.props.loading ? (
          <LoadingSpinner />
        ) : (
          <Suspense fallback={<div />}>
            <PlotlyChart divId="dashboardChart" />
          </Suspense>
        )}
      </div>
    );
  }
}

By using React.lazy, the PlotlyChart component will not load until is is ready to be displayed. This way it will always have a valid div to render to.

[kristian2x]

Would be great to see an integrated solution

[nicolaskruchten]

@dmt0 can you grab this one please?

[dmt0]

This could probably be fixed easily. We can add a check here: https://github.com/plotly/react-plotly.js/blob/master/src/factory.js#L116 to see whether this.el exists before we react. But I'd need to reproduce the issue first, and I'm having hard time doing this. Does anyone have a minimal example of this?