WebpackError: ReferenceError: document is not defined with lottie-react

Question

I am currently working on a Gatsby Project and when I tried to build the project after adding lottie-react animations to the project it gave me the error output below.

 ERROR #95312  HTML.COMPILATION

"document" is not available during server-side rendering. Enable "DEV_SSR" to debug this during "gatsby develop".

See our docs page for more info on this error: https://gatsby.dev/debug-html


  WebpackError: ReferenceError: document is not defined

This is the code I am using currently for lottie animations

import React, { useEffect, useState } from "react";
import classNames from "classnames";
import Lottie from "lottie-react";
import animationData from "../loader/Ark_Lottie_Loader.json";

interface LoaderProps {
  loading: boolean;
}

const Loader: React.FC<LoaderProps> = ({ loading }) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    document.body.style.overflow = "hidden";

    const timeout = setTimeout(() => {
      setIsVisible(false);
      document.body.style.overflow = "unset";
    }, 3000);

    return () => clearTimeout(timeout);
  }, []);

  return (
    <div
      className={classNames(
        "loader fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-[#FFFFFF] transition-opacity",
        {
          ["opacity-100"]: isVisible,
          ["pointer-events-none opacity-0"]: !isVisible,
        },
      )}
    >
      <Lottie animationData={animationData} loop={true} />
    </div>
  );
};

export default Loader;

I tried wrapping the document tags inside using if(typeof document !== "undefined") ub useEffect but got the same error as specified above.

If I remove all the lottie components and try, the code builds perfectly.