Uncaught Error: Resize must be passed a displayed plot div element.

[slaweet]

I'm getting this error randomly:

vue-plotly.umd.js?04d1:151220 Uncaught (in promise) Error: Resize must be passed a displayed plot div element.
    at eval (vue-plotly.umd.js?04d1:151220)
    at new Promise (<anonymous>)
    at Object.bb71.plots.resize (vue-plotly.umd.js?04d1:151218)
    at VueComponent.onResize (vue-plotly.umd.js?04d1:210184)
    at EventQueue.eval (vue-plotly.umd.js?04d1:54385)
    at invokeFunc (vue-plotly.umd.js?04d1:208299)
    at trailingEdge (vue-plotly.umd.js?04d1:208346)
    at timerExpired (vue-plotly.umd.js?04d1:208334)

My guess is that it's because

vue-plotly/src/components/Plotly.vue

Line 2 in 024f579

<div :id="id" v-resize:debounce.100="onResize" />

has the debounce and

vue-plotly/src/components/Plotly.vue

Lines 82 to 84 in 024f579

	onResize() {
	Plotly.Plots.resize(this.$el);
	},

doesn't check if the component wasn't unmounted in the meantime.

[aurium]

Why there is a v-resize:debounce.100="onResize" and not only a :responsive="true"?

[slaweet]

Why there is a v-resize:debounce.100="onResize" and not only a :responsive="true"?

@aurium What do you mean exactly by your suggestion? Just plain replacing v-resize:debounce.100="onResize" with :responsive="true" makes no sense to me as the former is processed by https://www.npmjs.com/package/vue-resize-directive whereas for the latter there's no implementation of what does the attribute do.

Moreover, with no debounce a page can become unresponsive for a long time when you drag window edge to resize the browser window and there are many complex charts on the page.