Nuxt•5mo ago

Hydration completed but contains mismatches.

Hello, I'm struggling with a hydration error in a nuxt 3 project. I have a simple demo page:

<template>
  <div>TEST</div>
</template>

<template>
  <div>TEST</div>
</template>

I have a layout which only contains a slot:

<template>
  <div class="default-layout">
    <div>
      <slot />
    </div>
  </div>
</template>

<template>
  <div class="default-layout">
    <div>
      <slot />
    </div>
  </div>
</template>

And I have a simple app.vue in root folder:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>



For some reason on https://storefront.artnight.com/test I'm seeing

Hydration completed but contains mismatches.` in the console. I put the exact same code on another domain https://storefront.artnight.rocks/test and I don't see the hydration error there, also I don't see it in a local dev environment. I'm struggling to find a root cause of why hydration error happens on .com only and any help would be appreciated.

ArtNight: Dein Erlebnis. Dein Kunstwerk.

ArtNight ist DAS kreative Erlebnis! Erlebe unterhaltsame Workshops unter der Leitung unserer ArtNight Künstler.

3 Replies

Mähh•5mo ago

If this happens on domain basis, you should check your CDN Proxies. Mabye this two domains have different Settings, as far as i see correctly, both domains having Cloudflare in front of it. Here are some settings you should disable in cloudflare to prevent hydration mismatches. https://nuxt.com/docs/getting-started/deployment#cdn-proxy

Nuxt

Deployment · Get Started with Nuxt

Learn how to deploy your Nuxt application to any hosting provider.

prevolsekOP•5mo ago

oh thank you @Mähh , I thought I was going crazy... Unchecking Speed > Optimization > Content Optimization > Auto Minify: Uncheck JavaScript, CSS and HTML fixed it. Thanks again!

Mähh•5mo ago

No problem 😄 around 2 years ago i stuck on the same problem, with Cloudflares HTML minify "feature". Turns out, cloudflare removes the inline comments in v-if conditions  required by vue, which breaks the hydration 🥲

Gaming

Programming

Hydration completed but contains mismatches.