Hydration class mismatch (SSR)

[ErfanBahramali]

Hydration class mismatch on SSR mode

[Vue warn]: Hydration class mismatch on <div class=​"flex flex-col w-full items-center justify-center aos-init aos-animate" data-aos=​"fade-up" data-v-inspector=​"pages/​index.vue:​74:​9" data-v-02281a80>​…​</div>​flex 
  - rendered on server: class="flex flex-col w-full items-center justify-center aos-init aos-animate"
  - expected on client: class="flex flex-col w-full items-center justify-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. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

[egidiusmengelberg]

Do you have a minimal example? It's kinda hard to investigate without any actual code.

[bart]

Same issue here. Maybe we have to wrap it animated containers by <client-only>

[egidiusmengelberg]

yeah, could you test if adding client-only tags around the element with data-aos fixes the issue?

[ErfanBahramali]

Do you have a minimal example? It's kinda hard to investigate without any actual code.

In a particular case, this does not happen Generally, you should see this issue when using AOS in SSR mode Just create a raw project and enable the SSR mode

[egidiusmengelberg]

Thanks, ill check it out and let you know

[egidiusmengelberg]

Weird, when I try to replicate it, it works fine.

With a fresh nuxt install (v3.10.1) and nuxt-aos v1.2.2

Are you using an older version of nuxt?

Did you try using client-only element? https://nuxt.com/docs/api/components/client-only

[bart]

I'm on latest Nuxt (3.10.1) and Nuxt-AOS (1.2.2). With <client-only> wrapping it works but I'm curious that it works in your tests without it.

[marius-mcfly]

Same here. I'm also on version 3.10.1.

[ErfanBahramali]

With a fresh nuxt install (v3.10.1) and nuxt-aos v1.2.2

Are you using an older version of nuxt?

Yes, I use the latest versions

See this link:

https://stackblitz.com/edit/nuxt-starter-qhpa3r

Check your console in the browser

Did you try using client-only element? https://nuxt.com/docs/api/components/client-only

It works, but the problem is that if we want to use it, we have to put all the elements that use AOS in client-only, which is not a good idea. I might use aos in 10 different places in the same project Also, when I use SSR, I want the text to be in the output of my request SSR is practically useless if I want to use client-only here !

[egidiusmengelberg]

Ah yeah, in your example I get the error too. It only happens when adding your own classes, I forgot those 🫣.

Yeah I agree using client-only would not be a good solution. Anybody any ideas how to fix this?

I tried replicating the error by adding a class to a div using the following code. This gets the same result.

<template>
  <div>
    <div id="element" class="hello">Lorem ipsum dolor!</div>
  </div>
</template>

<script setup>
  if (process.client) {
    const el = document.getElementById('element');
    el.classList.add('world');
  }
</script>

When adding a timeout it works fine

<template>
  <div>
    <div id="element" class="hello">Lorem ipsum dolor!</div>
  </div>
</template>

<script setup>
  if (process.client) {
    const el = document.getElementById('element');
    setTimeout(() => {
      el.classList.add('world');
    }, 10)
  }
</script>

Don't know if this is the prettiest solution, but this should work I think.

If people agree I'll open a pr and add a timeout.

[jakubm95]

@egidiusmengelberg I found something like this, but I'm not sure about the solution.

 $nuxtApp.hook("page:finish", () => {
    AOS.init(config.public.aos || {});
  });

[ErfanBahramali]

@egidiusmengelberg I found something like this, but I'm not sure about the solution.

 $nuxtApp.hook("page:finish", () => {
    AOS.init(config.public.aos || {});
  });

I tested this and it works well without any problems app:mounted can also be used

[egidiusmengelberg]

ah yeah thats a better solution. I'll create a PR and merge it today

[egidiusmengelberg]

should be fixed in v1.2.3

[alessiochiffi]

Unfortunately this is still an issue for me. Using Nuxt 3.11.0 and nuxt-aos 1.2.4. The mismatch warning appears only if I add a custom CSS class on the same element. I tried adding the proposed nuxt app hooks but none of them worked

[egidiusmengelberg]

reopening this issue to further test what is happening

[egidiusmengelberg]

Unfortunately this is still an issue for me. Using Nuxt 3.11.0 and nuxt-aos 1.2.4. The mismatch warning appears only if I add a custom CSS class on the same element. I tried adding the proposed nuxt app hooks but none of them worked

@alessiochiffi Do you have a code example. I cant reproduce the error locally.

[alessiochiffi]

I apologise @egidiusmengelberg , I've just run a fresh npm install and the warning is gone 😮.

[egidiusmengelberg]

ah okay, no problem. closing this issue since it should be fixed in v1.2.4

[jackbarham]

I know this is closed, but if it helps anyone else, using data-aos on a div or elements without any other classes (edit: It could be specific to Tailwind) fixed it for me.

Good:

<div class="flex justify-center">
  <div data-aos="fade-up" data-aos-once="true">
    <p>Something</p>
  </div>
</div>

Bad:

<div data-aos="fade-up" data-aos-once="true" class="flex justify-center">
  <p>Something</p>
</div>

nuxt: v3.11.2 nuxt-aos: v1.2.4

[egidiusmengelberg]

just reopened it so people can easily find this issue