Server Error

TypeError: Cannot read properties of null (reading 'useEffect')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

components\Transition.jsx (8:12) @ eval

   6 |  
   7 | 
>  8 |   useEffect(() => {
     |            ^
   9 |     function handleResize() {
  10 |       // Define the width breakpoint for mobile, for example 768px
  11 |       if (window.innerWidth < 768) {     CODE:import { motion } from "framer-motion";
import React, { useState, useEffect } from "react";
import { useRouter } from "next/router";
import ParticlesContainer from "./ParticlesContainer";
import { useGlobe } from '../components/globe/globeContext';
 

  useEffect(() => {
    function handleResize() {
      // Define the width breakpoint for mobile, for example 768px
      if (window.innerWidth < 768) {
        setIsMobileView(true);
      } else {
        setIsMobileView(false);
      }
    }

    // Call the handler right away so state gets updated with initial window size
    handleResize();

    // Set up event listener
    window.addEventListener('resize', handleResize);

    // Remove event listener on cleanup
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
const Transition = () => {
  const [isMobileView, setIsMobileView] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const router = useRouter(); 
  const { globeReady } = useGlobe();
  let transitionDelay;

  const baseDelay = router.pathname === '/' ? 0.2 : 0.2;


  const transitionVariants = {
    initial: {
      x: "100%",
      width: "100%",
    },
    animate: {
      x: "0%",
      width: "0%",
    },
    exit: {
      x: ["0%", "100%"],
      width: ["0%", "100%"],
    },
  };

  useEffect(() => {
    function handleResize() {
      // Safeguarding window access
      if (typeof window !== 'undefined') {
    if (window.innerWidth < 768) {
      setIsMobileView(true);
    } else {
      setIsMobileView(false);
    }
  }
}

// Since we're using window, we safeguard the entire effect
if (typeof window !== 'undefined') {
  handleResize();
  window.addEventListener('resize', handleResize);
}

// Cleanup
return () => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', handleResize);
  }
};
}, []);

  useEffect(() => {
    // If we're on the homepage and globe is ready, set loaded to true
    if (router.pathname === '/' && globeReady) {
        setIsLoaded(true);
    } else if(router.pathname!== '/') {
        setIsLoaded(true);
      }
  }, [globeReady, router.pathname]);

 if (router.pathname === '/' && !globeReady) {
     transitionDelay = globeReady ? baseDelay : Infinity;
 } else if (router.pathname !== '/' && !globeReady) {
   transitionDelay = baseDelay;
 }

  return (
    <>
      {!isLoaded && (
        <motion.div
          role="status"
          className="fixed top-0 bottom-0 right-full w-screen h-screen z-30 bg-gradient-to-tl from-violet-900 to-black-900"
          variants={transitionVariants}
          initial="initial"
          animate="animate"
          exit="exit"
          transition={{ delay: transitionDelay, duration: 0.6, ease: "easeInOut" }}
          aria-hidden="true"
        >
          <motion.img
            src="/logo.svg"
            alt="Descriptive text"
            style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              width: '500px',
              height: '500px'
            }}
          />
          <motion.img
            src="/hand.gif"
            alt="Descriptive text"
            style={{
              position: 'absolute',
              top: '70%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              width: '500px',
              height: '500px'
            }}
          /> 

          <motion.div
            className="pt-5 text-center sm:px-6 lg:px-8 font-bold"
            style={{
              position: 'absolute',
              textAlign: 'center',
              top: '100%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              width: '500px',
              height: '500px',
              fontSize: '1.2rem',
            }}>
            loading ...
          </motion.div>
          {!isMobileView && (
                <ParticlesContainer />
          )}
          
        </motion.div>
      )}
      <motion.div
        role="status"
        className="fixed top-0 bottom-0 right-full w-screen h-screen z-20 bg-gradient-to-tl from-violet-900 to-zinc-800"
        variants={transitionVariants}
        initial="initial"
        animate="animate"
        exit="exit"
        transition={{ delay: 0.4, duration: 0.6, ease: "easeInOut" }}
        aria-hidden
      /> 
      <motion.div
        role="status"
        className="fixed top-0 bottom-0 right-full w-screen h-screen z-10 bg-gradient-to-tl from-violet-900 to-blue-600"
        variants={transitionVariants}
        initial="initial"
        animate="animate"
        exit="exit"
        transition={{ delay: 0.6, duration: 0.6, ease: "easeInOut" }}
        aria-hidden
      />
       
    </>
  );
};

export default Transition;