react-plotly.js: Error while plotting after React update

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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 10
Comments: 32 (10 by maintainers)

Most upvoted comments

Bump

ArcticTee on Nov 28, 2018

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 on Feb 27, 2018

Bump!

AndrewUldin on Feb 14, 2019

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

paulboocock on Apr 12, 2018

Yep, all looks good, made a PR based on your solution, thanks @vdh 😃

dmt0 on Feb 20, 2019

@dmt0 What exactly are the “some things” you’re worried about needing to be dereferenced? I would assume the existing code in componentWillUnmount is already handling the important cleanup.

The only thing the this.unmounting flag and wrapper does is detect if the purge is already happening, to avoid attempting a redundant update render post-purge. So unless there’s some special side-effect magic happening in those other chained calls (syncEventHandlers, syncWindowResize, figureCallback?) that still need to happen post-purge, then isn’t it beneficial to skip an update to nothing?

Is it important for the onUpdate callback to be triggered after an onPurge callback? I’d assume the event and resize handlers ought to be skipped since they seem only relevant to the DOM and rendering.

vdh on Feb 19, 2019

https://reactjs.org/docs/refs-and-the-dom.html#callback-refs

React will call the ref callback with the DOM element when the component mounts, and call it with null when it unmounts. Refs are guaranteed to be up-to-date before componentDidMount or componentDidUpdate fires.

It looks like someone didn’t properly account for when unmounting will set the ref to null. When you do anything asynchronous inside a component, you always need to check if your component is still mounted when your promises resolve.

vdh on Jan 25, 2019

@dmt0 Here’s a minimal example that reproduces the error:

The error will occur on initial render, and everytime the # of days is changed.

brammitch on Jan 23, 2019

Would be great to see an integrated solution

kristian2x on Jan 7, 2019