Updating to Vue 3.4.5 breaks component about vue-json-pretty HOT 14 CLOSED

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!

from vue-json-pretty.

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.

from vue-json-pretty.

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 [email protected](see https://blog.vuejs.org/posts/vue-3-4)

from vue-json-pretty.

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

from vue-json-pretty.

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.

from vue-json-pretty.

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

from vue-json-pretty.

3.4.15 - still there

from vue-json-pretty.

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

from vue-json-pretty.

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+

from vue-json-pretty.

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

from vue-json-pretty.

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?

from vue-json-pretty.

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

from vue-json-pretty.

@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. 🤷

from vue-json-pretty.

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.

from vue-json-pretty.