Upgrading to Vue 3.4.5 breaks the charts

[Kjir]

When I upgrade to Vue 3.4.5 the charts stop working. The options are pretty simple, in fact even with just the highcharts options and no other props, it still breaks:

<highcharts
  :options="histogramOptions"
   ></highcharts>

From what I could gather, the chartContainer ref is still null when the onMounted is called. I am not entirely sure why this changes from Vue 3.3 to vue 3.4

[Kjir]

Here is the simplest reproduction: https://stackblitz.com/edit/vitejs-vite-k8kyr7?file=src%2FApp.vue

Downgrading to Vue 3.3 fixes the issue

[damisparks]

@Kjir, I had the same issue with 3.4.5. I tested with 3.4.3 and 3.4.4, and it works.

"highcharts": "11.2.0",
"highcharts-vue": "1.4.3",
"vue": "^3.4.4",

[maprangsoft]

I have the same problem after upgrade nuxt to latest version and vue upgrade to 3.4.5

[manniL]

@maprangsoft You can simply pin vue to 3.4.4 via overrides

[jszuminski]

It seems to be related to the latest Vue update (3.4.4 -> 3.4.5) which might have broken something. Here's an issue: https://github.com/vuejs/core/issues/10012

I will try to investigate this issue and see if any sensible fix can be proposed. I will keep you posted.

[jszuminski]

Until Vue team solves this problem or until I do it on the highcharts-vue package, here's a simple /highcharts-vue folder that you can use in your projects which should work with Vue@3.4.5: https://stackblitz.com/edit/vitejs-vite-9fottc?file=src%2Fhighcharts-vue%2Findex.js

This highcharts-vue/index.js exports the exact same logic as the highcharts-vue package, but the issue related to TypeError: can't access property 'nodeName' does not arise.

Please let me know if that works for you @maprangsoft @damisparks @Kjir.

I'm investigating this problem and testing out different potential solutions, but in the meantime feel free to use the example that I've linked.

[dariel87]

Until Vue team solves this problem or until I do it on the highcharts-vue package, here's a simple /highcharts-vue folder that you can use in your projects which should work with Vue@3.4.5: https://stackblitz.com/edit/vitejs-vite-9fottc?file=src%2Fhighcharts-vue%2Findex.js

This highcharts-vue/index.js exports the exact same logic as the highcharts-vue package, but the issue related to TypeError: can't access property 'nodeName' does not arise.

Please let me know if that works for you @maprangsoft @damisparks @Kjir.

I'm investigating this problem and testing out different potential solutions, but in the meantime feel free to use the example that I've linked.

thank you very much, it works.

[sporritt]

Vue 3.4.6 is out now, which fixes these issues.

[damisparks]

@sporritt I can confirm it works on "vue": "^3.4.6". Anyway, I upgrade my vue version to "vue": "^3.4.13"

[damisparks]

Until Vue team solves this problem or until I do it on the highcharts-vue package, here's a simple /highcharts-vue folder that you can use in your projects which should work with Vue@3.4.5: https://stackblitz.com/edit/vitejs-vite-9fottc?file=src%2Fhighcharts-vue%2Findex.js This highcharts-vue/index.js exports the exact same logic as the highcharts-vue package, but the issue related to TypeError: can't access property 'nodeName' does not arise. Please let me know if that works for you @maprangsoft @damisparks @Kjir. I'm investigating this problem and testing out different potential solutions, but in the meantime feel free to use the example that I've linked.

thank you very much, it works.

The solution worked for me as well.

[maprangsoft]

Until Vue team solves this problem or until I do it on the highcharts-vue package, here's a simple /highcharts-vue folder that you can use in your projects which should work with Vue@3.4.5: https://stackblitz.com/edit/vitejs-vite-9fottc?file=src%2Fhighcharts-vue%2Findex.js

This highcharts-vue/index.js exports the exact same logic as the highcharts-vue package, but the issue related to TypeError: can't access property 'nodeName' does not arise.

Please let me know if that works for you @maprangsoft @damisparks @Kjir.

I'm investigating this problem and testing out different potential solutions, but in the meantime feel free to use the example that I've linked.

thank you very much i will use this solution during wait vue new version. 😍

[damisparks]

@maprangsoft vue has new versions. See the 👉🏾 Releases

[Kjir]

The new version of Vue fixes the issue, the problem can be considered resolved!

[ayhanfuat]

Anyway, I upgrade my vue version to "vue": "^3.4.13"

I see the same error in 3.4.13. For me only 3.4.6, 3.4.7 and 3.4.8 work. Anything above that gives the same error.