White Space
WebLife

Gatsby で window is not defined になる時の対処法

  • Gatsby

原因

おそらく SSR / SSG する時に言えることだと思いますが、Server Side Rendering 中は window オブジェクトが定義されていないため、レンダリング対象で window オブジェクトを使っているとエラーになります。

"window" is not available during server side rendering.
See our docs page for more info on this error: https://gatsby.dev/debug-html

WebpackError: ReferenceError: window is not defined

対処法

コンポーネント上で window オブジェクトが存在するかどうかを typeof window でチェックしてから使います。

const TestComponent = (props) => {
  ...
  if ( typeof window !== 'undefined' ) {
    ... window オブジェクトを使う ...
  }
  ...
}

window オブジェクトを使っているところで、三項演算子などで対応しても良いかもしれません。

公式の解説ページ（https://www.gatsbyjs.com/docs/debugging-html-builds/）によると、「componentDidMount ライフサイクル か、useEffect フックに入れろ」とも書いてあります。

多少面倒ですが、ブラウザのグローバルオブジェクトがサーバーでは無いため仕方ないんですかね。