AOS + NEXTJS 13 Extra attributes from the server: class?

Question

[Icantdothis]

Есть компонент AnimationWrapper.tsx:

import React from 'react';
import Aos from "aos";
import "aos/dist/aos.css";

const AnimationWrapper = ({children}: { children: React.ReactNode }) => {
    if(typeof window !== 'undefined'){
        Aos.init({ duration: 500 });
    }
    return (
        <div data-aos="fade-up">
            {children}
        </div>
    );
};

export default AnimationWrapper;

Когда я оборачиваю нужный блок в этот компонент, то Некст начинает ругаться такой ошибкой:
Extra attributes from the server: class

Как это решить? Или есть какие-то специальные замены для Некста 13(app) ?

Comments

[Михаил Р.]

SSR используется?

[Mikhail Osher]

Можно начать с того, что у Вас сайд-эффект в рендере.
И закончить тем, что для react проще использовать react-spring или framer-motion, нежели императивные библиотеки.