Updating to Vue 3.4.5 breaks component

[lagamura]

Updating from Vue 3.3.13 to 3.4.5 breaks functionality of the component throwing the following 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.

[RobsonMi]

Vue 3.4.4 seems to be the last without this warning. Would be lovely to get this sorted, even if it's just a warning.

[leezng]

After upgrading the vue version, the warning has disappeared.
Maybe it's related to this vuejs/core#10012

[RobsonMi]

I did test with Vue 3.4.14 just now and warning is still there and extending nodes of JSON by click on brackets doesn't work.

[tpoxa]

3.4.15 - still there

[leezng]

Can anyone provide a way to reproduce, for example https://stackblitz.com/edit/vitejs-vite-utj7dw?file=src%2FApp.vue
@tpoxa @RobsonMi

[RobsonMi]

Hi @leezng ! I did try to reproduce on the stackblitz you linked but couldn't. Perhaps full contents of warning from my project will contain some clues?

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <Tree key=0 ref="jsonPretty" data= 
Object { timestampFormatted: "2024-02-12 18:08:41.539", timestamp: 1707761321539, frame: 29501, system: {…}, location: {…}, speed: {…}, power: {…}, weights: {…}, lights: {…} }
  ... > 
  at <BaseTransition onEnter=fn<onEnter> onLeave=fn<onLeave> appear=false  ... > 
  at <Transition css=false appear=false onEnter=fn<onEnter>  ... > 
  at <QSlideTransition duration=undefined onShow=fn<onShow> onHide=fn<onHide> > 
  at <QExpansionItem dense="" class="log-item no-shadow q-px-sm q-py-xs" onShow=fn  ... > 
  at <LogItem key=7 event= 
Object { id: 7, type: "lights", payload: {…}, createdAt: "2024-02-12T18:08:42.460Z", title: "Lights", details: "Landing: OFF => ON<br/>Strobe: OFF => ON", data: {…} }
 > 
  at <AsyncComponentWrapper key=7 event= 
Object { id: 7, type: "lights", payload: {…}, createdAt: "2024-02-12T18:08:42.460Z", title: "Lights", details: "Landing: OFF => ON<br/>Strobe: OFF => ON", data: {…} }
 > 
  at <QList class="q-px-lg q-py-sm q-gutter-y-sm" > 
  at <BaseTransition onEnter=fn<onEnter> onLeave=fn<onLeave> appear=false  ... > 
  at <Transition css=false appear=false onEnter=fn<onEnter>  ... > 
  at <QSlideTransition duration=undefined onShow=fn<onShow> onHide=fn<onHide> > 
  at <QExpansionItem key=9 dense="" class="col-12 no-shadow q-px-sm q-py-xs" > 
  at <QCard class="main-card" > 
  at <QPage class="row justify-center" > 
  at <Review onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <QPageContainer> 
  at <QLayout view="hHh LpR lff" > 
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App>

I am using vue-json-pretty within Quasar's Extension Item and there are multiple on one page, like 100+

[ivanjaros]

Same as robson, this just blew up in my face out of nowhere(I realized i updated all dependencies last week so i only now noticed this big-ass bug today). pretty 2.3.0, vue 3.4.19.

it's kinda critical to get this fixed ASAP

[leezng]

Have you used dynamic components, such as for loops or asynchronous rendering, such as: https://stackoverflow.com/questions/76671447/missing-ref-owner-context-in-production

Can you provide your usage, including some context?

[NicolasReibnitz]

I'm on Vue v3.4.20 (the latest), and the problem comes up instantly, as soon as you pop in vue-json-pretty (v2.3.0).

Nothing else is in App.vue.

I hope this helps. Thanks!

[leezng]

@NicolasReibnitz What is your vite version? Is ssr used?

[NicolasReibnitz]

@NicolasReibnitz What is your vite version? Is ssr used?

That'd be v2.9.17.

Seems rather old, doesn't it? Apparently, @quasar/app-vite didn't update the Vite dependency for quite some time. 🤷

[leezng]

The problem has been located. When the vite version is less than 4 and the vue version is greater than 3.4.4, a warning will appear. I guess this may be some kind of correlation between vue and vite.

Update to 2.4.0-beta.1, the esm mode is newly added, which will be used first by Vite. It may solve some problems. You can try it.

Finally, it is recommended to update the following dependencies when upgrading to vue@3.4(see https://blog.vuejs.org/posts/vue-3-4)

[ivanjaros]

i was able to update to vite 2.9.17, vue 3.4.21, pretty 2.3.0 but no change. still broken. i will be moving to another library.

[tpoxa]

Update to 2.4.0-beta.1 helped to get rid of the warnings, thanks @leezng