"Cannot read property '__resizeListeners__' of null" on "destroy"

[dror-weiss]

I'm trying to change a series' type on the fly, basically from "column" to "line" and vice-versa.

For that, vue needs to re-render the component with the correct series configuration, so placing a ":key" makes it happen on every series type change. The key is composed with all the series' types, delimited by hyphen, like so:
<apexchart v-if="hasChartData" :key="chartId" :options="apexOptions" :series="apexSeries"/>
And possible keys are "revenue:column-comparison:column" and "revenue:line-comparison:column".

It works, however, I'm getting a javascript error on every key change originating from the old component's destroy function:

vue.runtime.esm.js?2b0e:1819 TypeError: Cannot read property 'resizeListeners' of null
at window.removeResizeListener (apexcharts.esm.js?e122:26271)
at ApexCharts.destroy (apexcharts.esm.js?e122:26973)
at VueComponent.destroy (vue-apexcharts.js?1321:93)
at VueComponent.beforeDestroy (vue-apexcharts.js?1321:69)
at callHook (vue.runtime.esm.js?2b0e:3025)
at VueComponent.Vue.$destroy (vue.runtime.esm.js?2b0e:2798)
at destroy (vue.runtime.esm.js?2b0e:4267)
at invokeDestroyHook (vue.runtime.esm.js?2b0e:5831)
at removeVnodes (vue.runtime.esm.js?2b0e:5847)
at updateChildren (vue.runtime.esm.js?2b0e:5952)

ApexCharts.destroy line:
window.removeResizeListener(this.el.parentNode, this.parentResizeCallback.bind(this))

window.removeResizeListener line:
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);

Any thoughts?

[junedchhipa]

Can you create a codesandbox demo, please? To reproduce easily on my side.
Please use this Vue template - https://codesandbox.io/s/pwwz8009n0

[dror-weiss]

This looks like a regression.

Your template uses vue-apexcharts 1.1.0, which don't introduce the error, but the latest 1.2.9 version does.

This codesandbox is using 1.2.9, check out the console output.
https://codesandbox.io/s/kmn9ynym5r

[junedchhipa]

Thanks. I will look into it soon.