search

David-Desmaisons / vue-plotly

📈 vue wrapper for plotly.js
https://david-desmaisons.github.io/vue-plotly/
MIT License
255 stars 74 forks source link

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

Open slaweet opened 2 years ago

slaweet commented 2 years ago

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 https://github.com/David-Desmaisons/vue-plotly/blob/024f579788c469cde9d4aaa23022cf8883f3cac3/src/components/Plotly.vue#L2 has the debounce and https://github.com/David-Desmaisons/vue-plotly/blob/024f579788c469cde9d4aaa23022cf8883f3cac3/src/components/Plotly.vue#L82-L84 doesn't check if the component wasn't unmounted in the meantime.

aurium commented 1 year ago

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

slaweet commented 1 year ago

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.