Upgrading to 3.4 breaks ref behaviour in highcharts-vue
Vue version
3.4.5
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-k8kyr7?file=src%2FApp.vue
Steps to reproduce
- Launch the app and open the devtools
- The error will be visible in the console
- 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: https://github.com/highcharts/highcharts-vue/issues/256
3
Downgrading to v3.4.4 works fine.
This was reported by a jsPlumb Toolkit licensee also, in relation to one of our demonstration apps:
<jsplumb-toolkit ref="toolkitComponent"
surface-id="surfaceId"
:render-params="this.renderParams()"
:view="this.viewParams()"
:toolkit-params="this.toolkitParams()"
url="copyright.json">
</jsplumb-toolkit>
The ref here causes the error "Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function" to be logged.