Highcharts are broken in Quasar (Vite) with Vue 3.4

[petr-panek]

What happened?

After upgrading to Vue 3.4 (3.4.15), the Highcharts are broken (only) in DEV mode, displaying 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. (35) (chunk-W5AEE7CF.js, line 1485)
"
"" at <Highcharts""options="Object">""
"" at <QPage""class=\"flex flex-center\""">""
"" at <IndexPage""onVnodeUnmounted=fn<onVnodeUnmounted>""ref=Ref<"undefined">"">""
"" at <RouterView>""
"" at <QPageContainer>""
"" at <QLayout""view=\"lHh Lpr lFf\""">""
"" at <MainLayout""onVnodeUnmounted=fn<onVnodeUnmounted>""ref=Ref<"undefined">"">""
"" at <RouterView>""
"" at <App>"

It's happening only to DEV mode, in BUILD it's OK.
I think it's somehow related to Highcharts bug #256.
But in pure Vue 3.4.15 (without Quasar) it's OK.
In Quasar with older Vue 3.3.13 it's also OK.

I tried to find the source of the problem.
I tried older quasar (quasar: 2.13.1 @quasar/app-vite: 1.6.2) with Vue 3.3.13 => it's OK.
The I upgraded Quasar (quasar: 2.13.1 → 2.14.3, @quasar/app-vite: 1.6.2 → 1.7.3) with Vue 3.3.13 => it's OK.
After upgrading Vue ([email protected] -> [email protected]) => Highcharts are broken.

What did you expect to happen?

display chart, no error

Reproduction URL

https://stackblitz.com/~/edit/quasarframework-ncbu8k

How to reproduce?

1. Start Quasar with Vite (Quasar CLI) with Vue <3.4
2. Install Highcharts and Highcharts-vue (npm install highcharts, npm install highcharts-vue)
3. Add Highcharts to Quasar boot (highcharts.js in boot directory, add highcharts in boot option in quasar.config.js)
4. Add any chart in Vue page
5. Check the chart is displaying correctly on page
6. Upgrade Vue to 3.4.15
7. See the broken chart (not displayed) and error message in console

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SPA Mode

Platforms/Browsers

No response

Quasar info output

this is info from Stackblitz

Operating System - Linux(5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36) - linux/x64
NodeJs - 18.18.0

Global packages
  NPM - 10.2.3
  yarn - 1.22.19
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.14.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.7.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.15 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.5
  pinia - Not installed
  vuex - Not installed
  vite - 2.9.17 -- Native-ESM powered web dev build tool
  eslint - 8.24.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - blitz-og5k-ancyv0un
  en0 - 192.168.1.104

Relevant log output

[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. (35) (chunk-W5AEE7CF.js, line 1485)
"
"" at <Highcharts""options="Object">""
"" at <QPage""class=\"flex flex-center\""">""
"" at <IndexPage""onVnodeUnmounted=fn<onVnodeUnmounted>""ref=Ref<"undefined">"">""
"" at <RouterView>""
"" at <QPageContainer>""
"" at <QLayout""view=\"lHh Lpr lFf\""">""
"" at <MainLayout""onVnodeUnmounted=fn<onVnodeUnmounted>""ref=Ref<"undefined">"">""
"" at <RouterView>""
"" at <App>"

[Warning] [Vue warn]: Unhandled error during execution of mounted hook (35) (highcharts-vue.js, line 25644)
"
"
" at <Highcharts"
"options="
Object
">"
"
"
" at <QPage"
"class=\"flex flex-center\""
">"
"
"
" at <IndexPage"
"onVnodeUnmounted=fn<onVnodeUnmounted>"
"ref=Ref<"
Proxy
">"
">"
"
"
" at <RouterView>"
"
"
" at <QPageContainer>"
"
"
" at <QLayout"
"view=\"lHh Lpr lFf\""
">"
"
"
" at <MainLayout"
"onVnodeUnmounted=fn<onVnodeUnmounted>"
"ref=Ref<"
Proxy
">"
">"
"
"
" at <RouterView>"
"
"
" at <App>"

[Error] Unhandled Promise Rejection: TypeError: null is not an object (evaluating 't3.nodeName')
	(anonymous function) (chunk-NXJB5AAK.js:4007)

[Error] Unhandled Promise Rejection: TypeError: null is not an object (evaluating 't3.nodeName')

Additional context

No response

[langmf]

I have the same problem!

[dovepa]

Same problem

[rstoenescu]

Hi,

This seems to be a Vue compiler/runtime issue (99% chances).
The bug report on Highcharts repo seems to have been closed because newer Vue 3.4 solves the issue.

Please upgrade the Vue version to its very latest and report back. This should not be a problem anymore, and we're not doing anything special in Quasar CLI to break the package anyway.

[dovepa]

Hi,

I appreciate your suggestion to upgrade to Vue 3.4. However, after performing the upgrade, I still encounter the same issue. It seems like the bug persists even with the latest Vue version. I've double-checked the upgrade process, cleared the cache, and reviewed the documentation, but the problem remains unresolved.

Do you have any additional recommendations or insights on how to address this issue?

[petr-panek]

I don't have deep knowlege in this field. But because there is no issue in "vanilla" Vue 3.4.15 with Vite 5.0.12, but in Quasar with Vite 2.9.17, I guess the issue may be related to older version of Vite.

[oliverphaser]

I have the same issue with Solid Gauge. I tried everyhing, but no success.

[rstoenescu]

Can someone provide a reproduction stackblitz or repo pls? The link provided in the OP description is not a valid one.
Thank you in advance.

Also, I'm about to release the next major version of q/app-vite which has Vite 5 among a TON of other improvements.

[petr-panek]

Provided Stackblitz

Can someone provide a reproduction stackblitz or repo pls? The link provided in the OP description is not a valid one. Thank you in advance.

Also, I'm about to release the next major version of q/app-vite which has Vite 5 among a TON of other improvements.

Provided Stackblitz in the OP description works for me: https://stackblitz.com/~/edit/quasarframework-ncbu8k

[rstoenescu]

Seems to be working with q/app-vite v2.0.0-beta.1 (has Vite 5 among a ton of other improvements and new features --- released today)

If this is a Vite 2 issue (as it seems), then please upgrade to q/app-vite 2.0.0-beta.1.

Must read (all):

• Release notes
• Forum announcement
• Docs page (if you get 404, wait for the docs PWA to update for you)

[rstoenescu]

Will close this as Vite 2 will no longer receive updates -- and we can't do anything about it.
The upgrade to the new q/app-vite seems the only path available.

We are sorry for any potential inconvenience but since this is out of our reach it's the only solution. Fortunately, I've released the new CLI today (we've been working for a LONG time on it) and it has this fixed downstream.

[petr-panek]

Thank you for the quick response. Your solution is acceptable indeed. No need to sorry. It's software, we know what the risks are :-)