カートに入れました

ビルドした時にerror "window" is not available during server side rendering.と出た

Gatsbyのプロジェクトで開発中は特にエラーもなかったのですが、ビルドしたらエラーが出てしまった。

error "window" is not available during server side rendering.
failed Building static HTML for pages - 1.909s

  28 |       <section className={`section section--gradient`}>
  29 |         <div className="container">
> 30 |           <div className={window.innerWidth > 820 ? `section` : ``}>
     |                           ^
  31 |             {/* <div className="columns"> */}
  32 |               <div className="column is-7 is-offset-1">
  33 |                 <h3 className="has-text-weight-semibold is-size-2" style=

useEffectの中で変数に代入するといけるみたい

import React, { useState, useEffect } from "react";

...

export const IndexPageTemplate = ({ ... }) => {

...

  const [innerWidth, setInnerWidth] = useState('')
  useEffect(() => {
    setInnerWidth(window.innerWidth)
  }, [])

  return (
    <div>
      <Seo
        url={`${siteUrl}${location.pathname}`}
        title={title}
      />
      <FullWidthImage img={heroImage} title={title} subheading={subheading} />
      <section className={`section section--gradient`}>
        <div className="container">
          <div className={innerWidth > 820 ? `section` : ``}>
            <div className="columns">
              <div className="column is-10 is-offset-1">
                <div className="content">

...

参考