Charts ar broken in Vue.js DEV mode

[petr-panek]

I had no issues with Highchart in Vue and Quasar till now. But after some upgrade (Vite / Vue?) this issue appears. In the build version, there is no error, but in DEV mode I'm facing this error:

[Warning] [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. (31) (chunk-W5AEE7CF.js, line 1485)
"
"" at <Highcharts""options="{showNoData: false, chart: {type: "pie"}, title: {text: null}, series: Array}Object">""
"" at <TestPage""onVnodeUnmounted=fn<onVnodeUnmounted>""ref=Ref<"undefined">"">""
"" at <RouterView>""
"" at <QPageContainer>""
"" at <QLayout""view=\"hhh lpR fFf\""">""
"" at <MinimalLayout""onVnodeUnmounted=fn<onVnodeUnmounted>""ref=Ref<"undefined">"">""
"" at <RouterView>""
"" at <App>"

I expected it's related to issue #256,, so I upgraded Vue to latest version 3.4.15 and Highcharts to 11.3.0, but error remains.

Chart are inserted in Vue template normal way:

 <highcharts
      options="chartOptions"
    />

Because the issue is only in DEV mode, I assume the problem maybe how Hightcharts are imported into Quasar. It's not imported in compoment, but in Quasar boot (in quasar.config.js and boot/highcharts.js). I tried to import Highchart-vue directly in component, instead of boot, but the result is the same, same errror message. Maybe the problem is in Highcharts itself.

Please any idea where can be problem?

[petr-panek]

[jszuminski]

Thanks for reporting!

This seems to be the duplicate of: https://github.com/highcharts/highcharts-vue/issues/256

It was related to a specific version of Vue which introduced a bug related to ref. Please upgrade your Vue version and this problem will disappear.

Do not hesitate to ask in case you have any more questions.

[petr-panek]

But my Vue is on latest version 3.4.15

[petr-panek]

Freshly installed Vue 3.4.15 + Highcharts 11.3 + Highcharts-vue works OK. In my case it can be some issue with Quasar/Vite.