GatsbyJS - build show error window is not defined (AOS)

Question

I'm new with GatsbyJS and ReactJS and i have a problem when I build my project. The problem is whenever I build the project with AOS inside it, it show error window is not defined. It is totally fine when i run in develop mode.

And this is my code:

I read that componentDidMount() should fix the problem. Unfortunately, it does not work for me.

Any help? Thank you..

Answer 1

I changed my code to:

import React from "react";
import Link from "gatsby-link";

import whiteLogo from "../img/tm_logo_white.png";
import myImg from "../img/me.jpg";

class IndexPage extends React.Component {

    componentDidMount() {
        const isBrowser = typeof window !== "undefined";
        const AOS = isBrowser ? require("aos") : undefined;

        this.aos = AOS;
        this.aos.init();
    }

    componentDidUpdate() {
        this.aos.refresh();
    }
}

Deleted import AOS from "aos" at the top, and everything works fine for me.