TwicPics/components

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

existe-deja opened this issue · 3 comments

existe-deja commented

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"
    />
mbgspcii commented

Hi @existe-deja

I confess that I don't fully understand. I'm having difficulty recognizing the code generated by the TwicPics components.

Can you confirm that you are using one of TwicImg, TwicVideo or TwicPicture ?

In any case, it sounds like a problem we've encountered on Next.

Thanks for the issue.

We'll keep you informed.

jaubourg commented

From what I can gather, @existe-deja is using script attributes directly. In that particular instance, to handle a background image, something TwicPics components do not provide at the moment. I suspect the script is installed before hydration and it starts handling the element right away before Nuxt has a chance to check the HTML structure. I'm surprised we didn't see Hydration errors on our end.

@existe-deja are you, by any chance, installing the script manually? The TwicPics components will install the script for you (since they use it internally) and it should do so in a timely fashion.

existe-deja commented

Hi, thanks for your answers.

@jaubourg you're right, I'm using the data-twic-background functionality.
I decided to write an issue because I read the changelog few days ago and it was mentioning hydratation issue with Next.

Twicpics is installed with the provided nuxt3 module. I'll post you a minimal reproduction setup asap.

  • 👍1