Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v-if="data.property" in <slot> causes hydration error

See original GitHub issue

Environment

Nuxt CLI v3.0.0-rc.1 13:39:19 RootDir: C:\Users\micro\Prosjekter\plafat 13:39:25 Nuxt project info: 13:39:25

  • Operating System: Windows_NT
  • Node Version: v16.13.1
  • Nuxt Version: 3.0.0-rc.1
  • Package Manager: npm@8.5.5
  • Builder: vite
  • User Config: ssr, target, buildModules, strapi, vue, publicRuntimeConfig, css, vite
  • Runtime Modules: -
  • Build Modules: @nuxtjs/strapi@1.3.2

Reproduction

Link: https://stackblitz.com/edit/github-j2knto?file=app.vue Not sure if it shows the problem, as I am unsure how to se the console error log.

Describe the bug

When I use an object with the condition v-if inside the slot of an component it causes an hydration error.

<AppImage :image="object.image" >
    <div v-if="object.time < 90" class="card-label">Fast</div>
</AppImage>

However if it’s just the object and no condition, I do not get the hydration error.

<AppImage :image="object.image" >
    <div >{{ object.time }}</div>
</AppImage>

~components/AppImage.vue

<template>
<div>
    ...
    <slot />
</div>
</template>

Additional context

No response

Logs

client.ts:16 [vite] connecting...
client.ts:53 [vite] connected.
runtime-core.esm-bundler.js:1328 <Suspense> is an experimental feature and its API will likely change.
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: figure 
- Server rendered DOM: <!--v-if-->  
  at <AppImage image= {id: 43, name: 'cake-5091032.jpg', alternativeText: 'cake-5091032.jpg', caption: 'cake-5091032.jpg', width: 3648, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/45-nr2-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/45-nr2-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
handleMismatch @ runtime-core.esm-bundler.js:4328
onMismatch @ runtime-core.esm-bundler.js:4077
hydrateNode @ runtime-core.esm-bundler.js:4141
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 112 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: img 
- Server rendered DOM: <!--]-->  
  at <AppImage image= {id: 43, name: 'cake-5091032.jpg', alternativeText: 'cake-5091032.jpg', caption: 'cake-5091032.jpg', width: 3648, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/45-nr2-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/45-nr2-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
handleMismatch @ runtime-core.esm-bundler.js:4328
onMismatch @ runtime-core.esm-bundler.js:4077
hydrateNode @ runtime-core.esm-bundler.js:4141
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 112 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom. 
  at <AppImage image= {id: 43, name: 'cake-5091032.jpg', alternativeText: 'cake-5091032.jpg', caption: 'cake-5091032.jpg', width: 3648, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/45-nr2-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/45-nr2-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
hydrateElement @ runtime-core.esm-bundler.js:4253
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 108 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: figure 
- Server rendered DOM: <!--v-if-->  
  at <AppImage image= {id: 45, name: 'cake-1850011.jpg', alternativeText: 'cake-1850011.jpg', caption: 'cake-1850011.jpg', width: 6683, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/47-muscle-boys-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/47-muscle-boys-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
handleMismatch @ runtime-core.esm-bundler.js:4328
onMismatch @ runtime-core.esm-bundler.js:4077
hydrateNode @ runtime-core.esm-bundler.js:4141
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 112 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: img 
- Server rendered DOM: <!--]-->  
  at <AppImage image= {id: 45, name: 'cake-1850011.jpg', alternativeText: 'cake-1850011.jpg', caption: 'cake-1850011.jpg', width: 6683, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/47-muscle-boys-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/47-muscle-boys-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
handleMismatch @ runtime-core.esm-bundler.js:4328
onMismatch @ runtime-core.esm-bundler.js:4077
hydrateNode @ runtime-core.esm-bundler.js:4141
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 112 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom. 
  at <AppImage image= {id: 45, name: 'cake-1850011.jpg', alternativeText: 'cake-1850011.jpg', caption: 'cake-1850011.jpg', width: 6683, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/47-muscle-boys-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/47-muscle-boys-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
hydrateElement @ runtime-core.esm-bundler.js:4253
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 108 more frames

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
danielroecommented, Jun 8, 2022

Yes, it doesn’t seem to be resolved with the latest Vue. Might be worth creating a new issue with a reproduction. (Looks like the one created previously was closed as it lacked one.)

1reaction
niklasfjeldbergcommented, Jun 2, 2022

@cawa-93 I still have the issue. I am using nuxt@3.0.0-rc.3.

Read more comments on GitHub >

github_iconTop Results From Across the Web

v-if="object.property" in <slot> causes hydration error #5834
When I use an object with the condition v-if inside the slot of an component it causes an hydration error. <AppImage :image="object.image" >...
Read more >
React 18: Hydration failed because the initial UI does not ...
So in my own opinion based on my personal experience the problem is caused by improper arrangement of html elements and to solve...
Read more >
OpenStack: ChangeLog - Fossies
As a special service "Fossies" has tried to format the requested text file into HTML format (style: standard) with prefixed line numbers.
Read more >
StoreOnce Technical Overview - June 2015 | PDF | Backup
Port 1 and Port 2 of the same Defender should connect (Slot #1 ... from physical hard disk failure, the disks used for...
Read more >
https://wordlists-cdn.assetnote.io/data/automated/...
voi_modelYear Op depp unsc identifier_used ep.service pixRatio proposed bqoptimize campid 1e4 getQueryParam vif data-id ntv_ppc ntv_pb_rid ntv_dbr classid ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Cannot start nuxt on version v3.0.0-rc.2-27526179.f74a523

Next page

Dev server frequently freezes when using NX and Prisma