Window is not defined in NextJS React app?

问题

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);
}

回答1:

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.

回答2:

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
}

回答3:

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);
    }
}

回答4:

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

回答5:

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)

来源：https://stackoverflow.com/questions/55151041/window-is-not-defined-in-nextjs-react-app

标签

javascript

reactjs

next.js