Gatsby は、最も人気のある静的サイトジェネレータJamstackアプリのための事前に構築されたマークアップを作成するためです.それは、開発者コミュニティのための快適な生活をするためにプラグイン生態系の茄多を提供する反応ベースのフレームワークです.私は今、数年の間ギャツビーを使っています、そして、私の経験は2、3の不具合を除いて非常に良いです.
私たちは、私が直面している幸運の1つについて話します.私はあなたが役に立つと思います.

「ウィンドウが定義されていない」エラーは何ですか？

つの異なる環境で、ギャツビーベースのアプリケーションを実行できます.

gatsby develop : ホットリロードを可能にする開発環境この環境では、ブラウザ固有のAPIのようにlocalstorage, またはグローバルなようなwindow, document, などはうまくいきます.

gatsby build : 展開可能なアーチファクトを生成するアプリケーションを構築する環境です.あなたも、アプリケーションを使用して展開するアーチファクトからgatsby serve コマンド.と違ってdevelopment 環境変数build 環境はnodejs .

nodejs環境にはブラウザのようなグローバルがありませんwindow , document , したがって、ソースコードが参照を持っている場合、エラーが発生した場合にビルド失敗を発生させる可能性が高くなります.window is not defined .

Please note: You may also face this error when you use a client-side library(maybe, an npm) that contains a reference to window, document, etc.

どのように'ウィンドウの定義'エラーを修正するには？

このエラーを修正/無視する複数の方法があります.あなたは、あなたに最も適したものを使いたいかもしれません.

ウィンドウが定義されているかどうかを調べる

ブラウザのグローバルオブジェクトをチェックすることができますwindow が定義され、それに基づいて関連するコードブロックが実行されます.

const isBrowser = typeof window !== "undefined"

変数isBrowser 場合は、決定するのに役立ちますwindow オブジェクトは環境で利用できます.ブラウザのローカルストレージから項目を取得する方法をチェックして呼び出してみましょう.

export const isAuthenticated = () => {
  if (!isBrowser) {
    return;
  }

  return window.localstorage.getItem("isLoggedIn") === "true"
}

また、util関数のように書くことも考えます.

// utils.js

export const isBrowser = () => typeof window !== "undefined" 

その後、他の場所で使用します.

import { isBrowser } from './utils'; 

if (!isBrowser) {
    return;
}

// ... other code

USEffectフックまたはコンポーネントのマウントメソッドの使用

Gatsby 反応ベースのフレームワークです.問題のコードがコンポーネントのレンダリング関数にある場合は、そのコードをuseEffect フックまたはAcomponentDidMount ライフサイクル法.それはブラウザでない限り、コードが実行されないことを保証します.

構成レベルでの取り扱い

このエラーを設定レベルで修正/無視することもできます.この解決策は、サードパーティ製のモジュール/ライブラリ/NPMwindow オブジェクト.カスタマイズできますwebpack これらのモジュールをサーバレンダリング中にダミーモジュールで置換する設定.
これを行うには、gatsby-node.js ファイルの最後に追加します.

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /offending-module/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

語offending-module は、実際のモジュール名に置き換えなければなりません.例えば、あなたが使っているならauth0 Gatsbyでは、モジュール名をauth0-js 上記の構成で.Webpackのnullローダを使用して、効果的に無視しますauth0-js ビルド中.
私はあなたが役に立つ記事を見つける願っています.あなたがこの記事を楽しんでいるか、それが役に立つとわかるならば、接続しましょう.あなたは共有の思考、ヒント、およびコードの実践に私を見つけることができます.閉じるこの動画はお気に入りから削除されています.

JAMstack for All: An Introduction

JAMstack vs traditional monolithic workflow

What is a Static Site Generator and how to select one?

How to build a serverless app with Gatsby, Netlify and FaunaDB

私はコーヒーが大好きです☕.