Next React - ReferenceError: window is not defined

Question

I have two reusable functions where I use window.localStorage.getItem method.

const userByToken = () => {
    const dispatch = useDispatch();
    const token = window.localStorage.getItem("token");
    const refreshToken = window.localStorage.getItem("refreshToken");
}

this function returns error for using window

but second function

    const useValidateToken = (setLoadingState: any) => {
      const router = useRouter();
      useEffect(() => {
          const token = window.localStorage.getItem("token");
          const refreshToken = window.localStorage.getItem("refreshToken");
      })
    }

doesn't return error.

why do I get error without useEffect?

In addition to the linked resolution - the *why* is most likely because server-side NextJS only performs the first render, so `useEffect`s are not called. But your first snippet is not in an effect, so it tries to call it during the server-side rendering — Brian Thompson, Jan 31 '22 at 17:52

score 4 · Answer 1 · answered Jan 31 '22 at 17:52

4

Next pre-renders components firstly in the server, where the window object does not exist.

You have to use useEffect or add kind of guards to avoid crashing when running the first render

  const isBrowser = !!window; // Feel free to define which is the best way to detect when is being runner in the browser
  if (isBrowser) {...}

answered Jan 31 '22 at 17:52

teo-garcia

111
3

Thank you for your respond, so it's not possible to use window without useEffect – Lasha Markhvaidze Jan 31 '22 at 17:59
1

You should use `typeof window !== 'undefined'` check. Calling `!!window` will raise ReferenceError on server-side. – Aitwar Jan 31 '22 at 18:37
You right @Aitwar, my demonstration was vague – teo-garcia Feb 01 '22 at 00:00

Next React - ReferenceError: window is not defined

1 Answers1