0

I am creating a react app where I want to hide the bottom arrow from the hero section over scroll. For that I have installed this "react-hide-on-scroll" package. Now, I am getting window is not defined error. I have tried fixing it using conditional rendering and checking if the window object is defined or not but I got hydration error after that. How can I fix it so that it works perfectly?

import { HideScroll } from "react-hide-on-scroll";

export default function Earn() {
  
  return (
    <>
      
        <Container>
          <div>
            <div
              className={`flex justify-center items-center lg:flex-row flex-col ${styles.heroEarn}`}
            >
              <div className={styles.earnHeaderContainer}>
                <EarnHeader />
                <HideScroll variant="down">
                  <a
                    className={`lg:hidden ${styles.bottomLinkSmall}`}
                    onClick={() => {
                      let pageHeight = window.innerHeight;
                      window.scrollTo({
                        top: pageHeight,
                        behavior: "smooth",
                      });
                    }}
                  >
                    <img
                      className="downArrowImg"
                      src="assets/misc/bottom-arrow.png"
                    />
                  </a>
                </HideScroll>
              </div>

This is the error that I got after running this code: Error Image

Anaya Ammar
  • 9
  • 3
  • There is no context but from what it looks like, you are using window(which is client side object) on next.js SERVER component, and in server there is no window defined, that is why you are getting error there. you can check whether you are using server or client component by just console-ing something, if you are using client component, console will be on your browser console, if you are using server component, you will see consoled text in your terminal – Y U K I M U R A Apr 28 '23 at 08:03

0 Answers0