components icon indicating copy to clipboard operation
components copied to clipboard

SSR using `data-twic-background` attribute cause hydratation mismatch because of `twic-background-done` class

Open existe-deja opened this issue 1 year ago • 3 comments

component: nuxt3 version: 0.27.1

On nuxt3, during SSR I have a hydration class mismatch caused by tthe removal of twic-background-done

Exemple of warning message

[Vue warn]: Hydration class mismatch on 
<div class="h-full min-h-[160px] bg-…er twic-background-done" data-twic-background="url('image:/XXX.jpg')" data-twic-step="50" data-v-inspector="components/XXX.vue:17:5" style='background-image: url("h…twic=v1/cover=300x163");'>
 
  - rendered on server: class="h-full min-h-[160px] bg-cover bg-center twic-background-done"
  - expected on client: class="h-full min-h-[160px] bg-cover bg-center"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch.

Exemple of component causing errors

    <div
      v-if="srcImage"
      :data-twic-background="`url('image:${srcImage}')`"
      data-twic-step="50"
      class="h-full min-h-[160px] bg-cover bg-center"
    />

existe-deja avatar Jan 31 '24 14:01 existe-deja