AOS with NextJS - Document is not defined

[trupakufi]

• BUG

Specifications

• AOS version: 3.0
• OS: Windows 10
• Browser: Google Chrome

Document is Not Defined

So, I throug that the aos work normaly with nextjs, but I met with a problem in document, my eslint says that document is not defined

And in the browser a see this.!

I try catch the bug using dynamic import but nothing instead.!

[GeniusHawlah]

I am facing the same problem right now. Were you able to solve it?

[aman-maharshi]

Calling the init() inside useEffect worked for me

useEffect(() => {
        AOS.init()
}, [])

[Princekrampah]

import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/globals.css';
import '../styles/header.css';
import Layout from "../components/Layout";
import { useEffect } from "react";

import AOS from 'aos';
import 'aos/dist/aos.css'; 




function MyApp({ Component, pageProps }) {
  
  useEffect(() => {
    AOS.init({
      startEvent: 'DOMContentLoaded', 
      initClassName: 'aos-init',
      animatedClassName: 'aos-animate'
    });
  }, [])

  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  )
}

export default MyApp

[nicefella]

Calling the init() inside useEffect worked for me

useEffect(() => {
        AOS.init()
}, [])

You are an amazingly maniac problem solver! Thank you!

[htamagnus]

I try:
`import { useEffect } from "react";
import AOS from 'aos';
import 'aos/dist/aos.css';

useEffect(() => {
AOS.init({
startEvent: 'DOMContentLoaded',
initClassName: 'aos-init',
animatedClassName: 'aos-animate'
});
}, [])`

and now I have this error:
`TypeError: Cannot read properties of null (reading 'useEffect')

`

[apophis51]

Calling the init() inside useEffect worked for me

useEffect(() => {
        AOS.init()
}, [])

YOU ARE A BRO!