Window is not defined after reload page on Next Js

[alimartondi]

hello, I really like using your work. but I got error when using it for my Next Js project. When the website is rendered for the first time it runs normally, but when I refresh (reload) the error "window is not defined" appears, thank you

[sereybuth120]

I ran into this issue as well. a while back. You can try doing this

const isClientRender = () => typeof window !== 'undefined' && typeof document !== 'undefined'; return <>{isClientRender && YOUR_CODE_GOES_HERE}</>

Hope this help.

[TamjidAhmed10]

JUST ADD TO index.tsx if (typeof window == "undefined") { // browser code return(<h1></h1>) }

[polopopeye]

this is work for me hope it helps! 😄

import React, { useEffect, useState } from 'react';
import {
  Animator,
  ScrollContainer,
  ScrollPage,
  batch,
  Fade,
} from 'react-scroll-motion';

const ScrollSteps = () => {
  const [isBrowser, setIsBrowser] = useState(false);
  useEffect(() => {
    setIsBrowser(typeof window !== undefined ? true : false);
  }, []);

  return (
    <>
      {isBrowser && (
        <ScrollContainer>
          <ScrollPage page={0}>
            <Animator animation={batch(Fade())}>
              <h2>EXAMPLE1</h2>
            </Animator>
          </ScrollPage>
          <ScrollPage page={1}>
            <Animator animation={batch(Fade())}>
              <h2>EXAMPLE2</h2>
            </Animator>
          </ScrollPage>
          <ScrollPage page={2}>
            <Animator animation={batch(Fade())}>
              <h2>EXAMPLE3</h2>
            </Animator>
          </ScrollPage>
        </ScrollContainer>
      )}
    </>
  );
};

export default ScrollSteps;

I think this should be in the readme because I don't think it's a bug

Great work btw! I love the component

[tofmat]

Hey, instead of importing ScrollContainer from "react-scroll-motion" directly, you can import it like this.

const ScrollContainer = dynamic(
    () => import("react-scroll-motion").then((mod) => mod.ScrollContainer),
    { ssr: false }
  );

Worked for me!

[alimartondi]

Helpfully , thank you!

[alimartondi]

Thankyou everyone, your answers really helped me, even i'm confused which one to try! 😂

[chouzzy]

Worked for me as well! Thank you guys :)