Window is not defined in NextJS React app?

Question

In my NextJS app I can't seem to access window

Unhandled Rejection (ReferenceError): window is not defined

componentWillMount() {
    console.log('window.innerHeight', window.innerHeight);
}

Answer 1

With No SSR

https://github.com/zeit/next.js#with-no-ssr

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

Answer 2

componentWillMount() lifecycle hook works both on server as well as client side. In your case server would not know about window or document during page serving, the suggestion is to move the code to either

Solution 1:

componentDidMount()

Or, Solution 2

In case it is something that you only want to perform in then you could write something like:

componentWillMount() {
    if (typeof window !== 'undefined') {
        console.log('window.innerHeight', window.innerHeight);
    }
}

Answer 3

If you use React Hooks you can move the code into the Effect Hook:

import * as React from "react";

export const MyComp = () => {

  React.useEffect(() => {
    // window is accessible here.
    console.log("window.innerHeight", window.innerHeight);
  });

  return (<div></div>)
}

The code inside useEffect is only executed on the client (in the browser), thus it has access to window.

Answer 4

In the constructor of your Class Component you can add

    if (typeof window === 'undefined') {
        global.window = {}
    }

Example:

import React, { Component } from 'react'

class MyClassName extends Component {

constructor(props){
    super(props)
    ...
    if (typeof window === 'undefined') {
        global.window = {}
    }

}

This will avoid the error (in my case the error would occur after I would click reload of the page)

Answer 5

Other solution is by using process.browser to just execute your command during rendering in client side only.

if (process.browser) {
  // client-side-only code
}

Answer 6

Move the code from componentWillMount() to componentDidMount():

componentDidMount() {
  console.log('window.innerHeight', window.innerHeight);
}

In NextJS, componentDidMount() is executed only the client where window and other browser specific APIs will be available. From the NextJS wiki:

Next.js is universal, which means it executes code first server-side, then client-side. The window object is only present client-side, so if you absolutely need to have access to it in some React component, you should put that code in componentDidMount. This lifecycle method will only be executed on the client. You may also want to check if there isn't some alternative universal library which may suit your needs.

Along the same lines, componentWillMount() will be deprecated in v17 of React so it effectively will be potentially unsafe to use in the very near future.