Skip to content

Upgrading to 3.4 breaks ref behaviour in highcharts-vue #10012

@Kjir

Description

@Kjir

Vue version

3.4.5

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-k8kyr7?file=src%2FApp.vue

Steps to reproduce

  1. Launch the app and open the devtools
  2. The error will be visible in the console
  3. Downgrade to Vue 3.3 to confirm the code works there

What is expected?

The graph should be displayed

What is actually happening?

The app throws errors and warnings:

 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.
[Vue warn]: Unhandled error during execution of mounted hook
Uncaught TypeError: can't access property "nodeName", t3 is null

System Info

No response

Any additional comments?

In Vue 3.4, the ref here is in its initial state (null) and does not contain a ref to the container: https://github.com/highcharts/highcharts-vue/blob/master/src/component.js#L80

In Vue 3.3 the ref correctly points to the <div>. When trying with a production build, the app still doesn't work, but a log there will eventually show the ref pointing to a <div>. This means somehow the order of execution of things has changed between the call to render() and the call to the onMounted() callback.

Also reported on the highchart-vue repository: highcharts/highcharts-vue#256

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions