DOM element provided is null or undefined

[lavor]

Hi, I am still getting this error in some circumstances.

react-plotly.js@2.4.0
plotly.js@1.54.6

I reported this error in the closed issue #52 two months ago. But I did not get any reaction, so I am opening a new issue.

I tried to debug my situation and come to finding that library is not checking if a component is mounted in promise handlers in updatePlotly function.

Short story
Hence, whenever the component mounts and in next moment it unmounts (before all promises in updatePlotly resolves), the syncWindowResize will call Plotly.Plots.resize with null (this.el) as an argument.

What happened in my situation in details (I've put some checkpoints in comments in bellow snippet):

updatePlotly(shouldInvokeResizeHandler, figureCallbackFunction, shouldAttachUpdateEvents) {
// updatePlotly: checkpoint 1
      this.p = this.p
        .then(() => {
          if (!this.el) {
            let error;
            if (this.unmounting) {
              error = new Error('Component is unmounting');
              error.reason = 'unmounting';
            } else {
              error = new Error('Missing element reference');
            }
            throw error;
          }
// updatePlotly: checkpoint 2
          return Plotly.react(this.el, {
            data: this.props.data,
            layout: this.props.layout,
            config: this.props.config,
            frames: this.props.frames,
          });
        })
        .then(() => this.syncWindowResize(shouldInvokeResizeHandler)  // updatePlotly: checkpoint 3)
        .then(this.syncEventHandlers)
        .then(() => this.figureCallback(figureCallbackFunction))
        .then(shouldAttachUpdateEvents ? this.attachUpdateEvents : () => {})
        .catch(err => {
          if (err.reason === 'unmounting') {
            return;
          }
          console.error('Error while plotting:', err); // eslint-disable-line no-console
          if (this.props.onError) {
            this.props.onError(err);
          }
        });

1. getRef sets ref correctly
2. componentDidMount
3. updatePlotly - updatePlotly: checkpoint 1
4. updatePlotly - updatePlotly: checkpoint 2
5. componentWillUnmount
6. getRef unmounting sets ref to null (see https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)
7. updatePlotly - updatePlotly: checkpoint 3
8. syncWindowResize calls Plotly.Plots.resize with argument this.el, which was set to null (step 6) and that results in Error while plotting: Error: DOM element provided is null or undefined.

Possible solution
Do not call things in promise then handler when unmounting:

// ...
 .then(() => {
  if(!this.unmounting) {
    return this.syncWindowResize(shouldInvokeResizeHandler))
  }
}
// ...

Alternative solution
Do not use this.unmountig at all and implement solution with cancelable promises:
https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html

[alexcjohnson]

Thanks for bringing this up @lavor

Your first solution seems reasonable. AFAICT the whole promise chain after Plotly.react is synchronous, so in addition this could likely all be simplified a good deal, something like:

this.p = this.p
    .then(() => {
        if (this.unmounting) {
            return;
        }
        if (!this.el) {
            throw new Error('Missing element reference');
        }
        return Plotly.react(this.el, {
            data: this.props.data,
            layout: this.props.layout,
            config: this.props.config,
            frames: this.props.frames,
          });
    })
    .then(() => {
        if (this.unmounting) {
            return;
        }
        this.syncWindowResize(shouldInvokeResizeHandler);
        this.syncEventHandlers()
        this.figureCallback(figureCallbackFunction);
        if (shouldAttachUpdateEvents) {
            this.attachUpdateEvents();
        }
    })
    .catch(err => {
        if (this.props.onError) {
          this.props.onError(err);
        }
        // TODO should we have else throw(err) here?
    });

Seem plausible? Either way, this isn't a problem that's come up in our own usage of this package so it's not a high priority for Plotly folks to fix, but if you'd like to make a PR this we'd be more than happy to review and incorporate it!

[lavor]

Thanks @alexcjohnson,

yes your solution is also correctly working in my environment.
Hence, I created PR for it.
This issue can be closed after merge.

[eric-burel]

Hi guys, I am hitting the same error message when running Storyshots (Jest snapshots for Storybook). I don't really get the proposed solution, is there a palliative I can use within React?