Giters

highcharts / highcharts-vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Upgrading to Vue 3.4.5 breaks the charts

Kjir opened this issue · comments

commented

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>

image

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

commented

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

Downgrading to Vue 3.3 fixes the issue

commented

@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",
commented

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

commented

@maprangsoft You can simply pin vue to 3.4.4 via overrides

commented

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: vuejs/core#10012

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

commented

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.

commented

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.

commented

Vue 3.4.6 is out now, which fixes these issues.

commented

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

commented

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.

commented

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. 😍

commented

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

commented

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