Fix for Next.js ReferenceError window is not defined

The window object is the reference to an open window in a browser. Therefore, the window object is only available on the client-side. This error occurs when you try to access the window object in the server-side code. This error usually occurs in Next.js and Nodejs applications because the Node.js server does not provide a browser environment.

Why does this window ReferenceError happen in Next.js?

Next.js is a serverside rendering technology. If your page has a getServerSideProps() method, Next.js will render the page on the server and serves the resulting Html to the client. If your page contains a window object, where Next.js executes in the server, you will likely encounter this issue.

Listed below is an example of an erroneous code.

export default function Home({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   //This code is executed in the server
   console.log(window.innerWidth)
return <>q{data.post.text}</>
}
export const getServerSideProps: GetServerSideProps = async () => {
  return {
    props: {
	data: { post: { title: "Next.js", text: "window is not defined" } }
    }
}

How to fix window ReferenceError in Next.js?

There are three easy ways to prevent this error.

1. Check to see if the window object is defined
2. Use the window object inside React useEffect hook or the componentDidMount lifecycle method in class components
3. Use globalThis property to access the window

1. Check to see if the window object is defined

That is a simple check to see if the window object is defined. The window object is defined means the code is running in the browser. Therefore, you have access to the window object.

if (typeof window !== "undefined") {
   //This code is executed in the browser
    console.log(window.innerWidth)
}

Alternatively use:

if (typeof window === "object") {
   //This code is executed in the browser
    console.log(window.innerWidth)
}

2. Use the window object in useEffect or componentDidMount

The useEffect hook in functional components or the componentDidMount in class components is always executed on the client-side. Therefore the window object is always available for the code inside those methods.

useEffect(() => {
    //This code is executed in the browser
    console.log(window.innerWidth)
}, [])

For class components:

componentWillMount() {
    //This code is executed in the browser
    console.log(window.innerWidth);
}

3. Use globalThis property to access the window

The globalThis property provides the access to this reference across environments.

export default function Home({ data }: InferGetServerSidePropsType) {
  	console.log(globalThis.window?.innerWidth)
return <>q{data.post.text}
}

How to fix window ReferenceError in Nodejs?

The best way to safeguard the window object in the Nodejs environment is to type check to see if the window object is defined.

if (typeof window === "object") {
   //This code is executed in the browser
    console.log(window.innerWidth)
}

The globalThis () property also fits the bill. Read the official documentation before using this method.

console.log(globalThis.window?.innerWidth)