Warning: Prop `className` did not match - Next.js about aos HOT 10 OPEN

I was able to solve this by following tutods method but importing it into my layout file like this:

const AosInit = dynamic(() => import('./<path>/AOSInit'), { ssr: true });

(Remember to export AOSInit as default)

from aos.

Does anyone have any idea how to fix this in the Next 13?

from aos.

When and how do you call AOS.init()? AOS is adding the class aos-init during initialization. At hydration, Next.js then experiences a mismatch between the server and client. I'm not that experienced with Next.js, but I'm guessing that's the problem. A possible solution might be calling AOS.init() in an effect. More information on the issue, you can find here: https://nextjs.org/docs/messages/react-hydration-error

from aos.

I handle the AOS.init() in a "use client" component:

'use client';

import AOS from 'aos';
import type { ReactNode } from 'react';
import { useEffect } from 'react';

import 'aos/dist/aos.css';

export const AosInit = ({ children }: { children: ReactNode }) => {
  useEffect(() => {
    AOS.init({
      anchorPlacement: 'top-bottom',
      mirror: true,
      offset: -100,
      once: false,
    });
  }, []);

  return <>{children}</>;
};

from aos.

After that only call this component in my layout:

from aos.

I have the same problem using Next.js 13+, did you manage to solve it?

from aos.

Hi @renovatt, no.
Already try a few things, but no success.

from aos.

I also can't understand it, because I'm using it in other projects and I don't have this problem, I've already updated all the dependencies and nothing works, I removed some providers around it and also without success. I can not understand. @tutods

from aos.

Thanks @renovatt

from aos.

It seems like you're encountering a warning about a prop mismatch related to the className attribute when using AOS (Animate on Scroll) in your Next.js project. This warning typically occurs when the className generated on the server-side rendering (SSR) doesn't match the one generated on the client-side. This can happen if there's a difference in how components are rendered between server and client.

One common approach to address this is to ensure that components are rendered consistently on both the server and client sides. You might want to check if there are any dynamic or conditional rendering that could cause differences between SSR and client-side rendering. Additionally, you can use libraries like react-async-script to load AOS dynamically on the client side, which might help mitigate this issue.

from aos.