Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug Report][3.0.0-beta.6] V-Tooltip causes Nuxt Hydration errors #15555

Closed
some-user123 opened this issue Aug 1, 2022 · 1 comment
Closed

[Bug Report][3.0.0-beta.6] V-Tooltip causes Nuxt Hydration errors #15555

some-user123 opened this issue Aug 1, 2022 · 1 comment
Labels
duplicate The issue has already been reported

Comments

@some-user123
Copy link

Environment

Vuetify Version: 3.0.0-beta.6
Vue Version: 3.2.36
Browsers: Chrome 103.0.0.0
OS: Windows 10

Steps to reproduce

  • yarn install
  • yarn dev
  • Open in browser

Expected Behavior

No warnings in console

Actual Behavior

Hydration warnings and errors in console

runtime-core.esm-bundler.js:38 [Vue warn]: Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. 
  at <VOverlay modelValue=false onUpdate:modelValue=fn<onUpdate:modelValue> ref=Ref< undefined >  ... > 
  at <VTooltip activator="parent" location="bottom" > 
  at <VDefaultsProvider key="content" defaults= {VIcon: {…}} > 
  at <VBtn> 
  at <VContainer> 
  at <VApp> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
hydrateChildren @ runtime-core.esm-bundler.js:4814
hydrateTeleport @ runtime-core.esm-bundler.js:6517
hydrateNode @ runtime-core.esm-bundler.js:4705
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateFragment @ runtime-core.esm-bundler.js:4832
hydrateNode @ runtime-core.esm-bundler.js:4647
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateFragment @ runtime-core.esm-bundler.js:4832
hydrateNode @ runtime-core.esm-bundler.js:4647
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateFragment @ runtime-core.esm-bundler.js:4832
hydrateNode @ runtime-core.esm-bundler.js:4647
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateFragment @ runtime-core.esm-bundler.js:4832
hydrateNode @ runtime-core.esm-bundler.js:4647
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateSuspense @ runtime-core.esm-bundler.js:1526
hydrateNode @ runtime-core.esm-bundler.js:4709
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrate2 @ runtime-core.esm-bundler.js:4566
mount @ runtime-core.esm-bundler.js:4399
app.mount @ runtime-dom.esm-bundler.js:1624
app.mount @ framework.ts:80
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 64 more frames
10:23:40.083 runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(Text) 
- Server rendered DOM: <!--]-->  
  at <VDefaultsProvider key="content" defaults= {VIcon: {…}} > 
  at <VBtn> 
  at <VContainer> 
  at <VApp> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
handleMismatch @ runtime-core.esm-bundler.js:4848
onMismatch @ runtime-core.esm-bundler.js:4576
hydrateNode @ runtime-core.esm-bundler.js:4595
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateFragment @ runtime-core.esm-bundler.js:4832
hydrateNode @ runtime-core.esm-bundler.js:4647
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateFragment @ runtime-core.esm-bundler.js:4832
hydrateNode @ runtime-core.esm-bundler.js:4647
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateFragment @ runtime-core.esm-bundler.js:4832
hydrateNode @ runtime-core.esm-bundler.js:4647
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateSuspense @ runtime-core.esm-bundler.js:1526
hydrateNode @ runtime-core.esm-bundler.js:4709
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrate2 @ runtime-core.esm-bundler.js:4566
mount @ runtime-core.esm-bundler.js:4399
app.mount @ runtime-dom.esm-bundler.js:1624
app.mount @ framework.ts:80
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 47 more frames
10:23:40.084 runtime-core.esm-bundler.js:38 [Vue warn]: Hydration children mismatch in <span>: server rendered element contains more child nodes than client vdom. 
  at <VBtn> 
  at <VContainer> 
  at <VApp> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
hydrateElement @ runtime-core.esm-bundler.js:4773
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateFragment @ runtime-core.esm-bundler.js:4832
hydrateNode @ runtime-core.esm-bundler.js:4647
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateChildren @ runtime-core.esm-bundler.js:4806
hydrateElement @ runtime-core.esm-bundler.js:4768
hydrateNode @ runtime-core.esm-bundler.js:4658
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrateSuspense @ runtime-core.esm-bundler.js:1526
hydrateNode @ runtime-core.esm-bundler.js:4709
hydrateSubTree @ runtime-core.esm-bundler.js:5559
componentUpdateFn @ runtime-core.esm-bundler.js:5573
run @ reactivity.esm-bundler.js:185
instance.update @ runtime-core.esm-bundler.js:5694
setupRenderEffect @ runtime-core.esm-bundler.js:5708
mountComponent @ runtime-core.esm-bundler.js:5490
hydrateNode @ runtime-core.esm-bundler.js:4667
hydrate2 @ runtime-core.esm-bundler.js:4566
mount @ runtime-core.esm-bundler.js:4399
app.mount @ runtime-dom.esm-bundler.js:1624
app.mount @ framework.ts:80
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 30 more frames
10:23:40.085 runtime-core.esm-bundler.js:4571 Hydration completed but contains mismatches.

Reproduction Link

https://github.com/some-user123/nuxt3-vuetify3-tooltip
@KaelWD
Copy link
Member

KaelWD commented Aug 1, 2022

Duplicate of #15323

@KaelWD KaelWD marked this as a duplicate of #15323 Aug 1, 2022
@KaelWD KaelWD closed this as not planned Won't fix, can't repro, duplicate, stale Aug 1, 2022
@KaelWD KaelWD added duplicate The issue has already been reported and removed S: triage labels Aug 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
duplicate The issue has already been reported
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@KaelWD @some-user123