Gatsby: ウィンドウが定義されていません

ええ、開発中、reactコンポーネントはwindowが定義されているブラウザーでのみ実行されます。 ビルド時に、Gatsbyはwindowが定義されていないサーバー上でこれらのコンポーネントをレンダリングします。 通常、Reactの場合、これに対する解決策は、 componentDidMount windowにのみアクセスするか、アクセスする前にwindowが存在することを確認することです。 これを行わないサードパーティのライブラリの場合、あなたが行ったことは素晴らしいように見えます。

@KyleAMathews gatsby developを使用してcomponentDidMountをhtml.jsまたは_template.jsx起動できないようです。おそらく、想定されていないか、実行しています。何か問題でも？

@hitchcottビルドについてもう少し共有できますか？ セマンティックUIをgatsbyプロジェクトにインストールしましたが、CSSが機能していません。 CSSを自分のページにロードする方法がわかりません。 Reactはインラインスタイルが正しいと想定していますが、どのようにしてそれらを認識していますか？ また、gulpではなくLESSビルドを実行するようにwebpackを構成する必要があると思います。 webpack-lessloaderをインストールしましたか？

@Maxhodges —あなたのスタイルを「知っている」のはReactではなくWebpackです。 バンドルされるJSファイルのどこかにコンパイル済みファイルをインポートまたは要求するため、Webpackはそれを認識します。

たとえば、メインのstyles.cssを_template.jsファイルにインポートするので、Webpackがバンドルをビルドすると、それらのスタイルが含まれます。開発モードではインラインです。 本番環境での外部参照ファイル（

GatsbyはデフォルトのWebpack構成にすでにローダーを含んでいるため、追加のLESSローダーは必要ありません。

docs-siteをインストールするためにGatsbyGitHubページの指示に従った方のために...
import { colors } from 'utils/colors'
はトラブルメーカーであり、これと$ {colors.bg}をコメントアウトした後、サイトはうまく開発されました。

これが発生したときに、より適切なエラーメッセージを表示することは可能でしょうか？ エラーがどこにあるのかわかりません。

Failed at generating HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
      throw err;
      ^
Error: ReferenceError: window is not defined
    at Object.defineProperty.value (render-page.js:44529:79)
    at __webpack_require__ (render-page.js:30:30)
    at Object.exports.__esModule (render-page.js:42560:24)
    at __webpack_require__ (render-page.js:30:30)
    at Object.defineProperty.value (render-page.js:42533:51)
    at __webpack_require__ (render-page.js:30:30)
    at Object.<anonymous> (render-page.js:80:19)
    at __webpack_require__ (render-page.js:30:30)
    at Object.assign.i (render-page.js:50:18)
    at render-page.js:53:10
error Command failed with exit code 1.

それは本当に良い考えです！ 現在1.0を強く押しているので、これは取得されません
すぐに、しかし今のところ、行番号にpublic /render-page.jsを開くだけです
そこに示され（44529）、どのコードが問題を引き起こしているのかを確認してください。

11時45分AMトーマスSeberechtsの水、2017年5月17日には[email protected]
書きました：

これが発生したときに、より適切なエラーメッセージを表示することは可能でしょうか？ 私
エラーがどこにあるのかわかりません。

HTMLの生成に失敗しました

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
エラーをスローします。
^
エラー：ReferenceError：ウィンドウが定義されていません
Object.defineProperty.value（render-page.js：44529：79）で
__webpack_require __（render-page.js：30：30）
Object.exports .__ esModule（render-page.js：42560：24）で
__webpack_require __（render-page.js：30：30）
Object.defineProperty.value（render-page.js：42533：51）で
__webpack_require __（render-page.js：30：30）
オブジェクトで。（render-page.js：80：19）
__webpack_require __（render-page.js：30：30）
Object.assign.i（render-page.js：50：18）で
render-page.js：53：10で
エラーコマンドが終了コード1で失敗しました。

—
あなたが言及されたのであなたはこれを受け取っています。

このメールに直接返信し、GitHubで表示してください
https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-302041105 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AAEVh6E9bZyyi0iX-Q7Q92VTvEb1DZbmks5r6sHGgaJpZM4Isiea
。

それはうまくいきました！ THX。

ヒント：これを解決するには、 typeof window !== 'undefined' && window.whaterver-you-needを入力します。

componetDidMountを使用すると、エラーは消えます

同様の問題がありますが、localStorageを使用して、ブラウザでredux状態の一部を保持しています。 store.jsファイルでwindow.localStorageを使用できない場合、この問題を回避するにはどうすればよいですか？

😢

ありがとう！

@gregorskii

const windowGlobal = typeof window !== 'undefined' && window

次に、 windowGlobal.localStorage

これは機能しましたが、 https ：

const windowGlobal = typeof window !== 'undefined' && window;
const localAdapter = windowGlobal ?
  adapter(windowGlobal.localStorage) :
  adapter(memoryStorage)
;

https://www.npmjs.com/package/redux-localstorageを使用し

componentDidMount windowにのみアクセスします

サードパーティのjsの要点。

// index.js
import React from "react";
import Link from "gatsby-link";

// import "uikit/dist/js/uikit";
// Third party JS access `window` without
// `typeof window !== "undefined"` check

class Template extends React.Component {
  componentDidMount() {
    import("uikit/dist/js/uikit")
      .then((uikit) => {
        this.uikit = uikit;
      })
      .catch((error) => console.error(error));
  }
  render() {
    // ...
  }
}

// ...

@CallMeLaNNの提案は私のために働いた。 UIkitを使用すると、次のようになります。

WebpackError：要素が定義されていません

componentDidMount内にインポートを配置することは機能しました。

 componentDidMount() {
    try {
      this.UIkit = require("uikit/dist/js/uikit");
      this.Icons = require("uikit/dist/js/uikit-icons");
      this.UIkit.use(this.Icons);
    } catch (e) {
      console.error(e);
    }
  }

ええ、開発中、reactコンポーネントはウィンドウが定義されているブラウザーでのみ実行されます。 ビルド時に、Gatsbyはウィンドウが定義されていないサーバー上でこれらのコンポーネントをレンダリングします。 通常、Reactの場合、これに対する解決策は、componentDidMountのウィンドウにアクセスするか、ウィンドウにアクセスする前にウィンドウが存在することを確認することだけです。 これを行わないサードパーティのライブラリの場合、あなたが行ったことは素晴らしいように見えます。

これを早期に/目立つように表面化することは非常に役立ちます。 初めてビルドしようとしていますが、これが問題になるとは知らなかったので、今修正しなければならない問題がたくさんあります。 これを緊急に展開する必要があるため、特にストレスがかかります。 何かの提案を提出していますが、サイトをオンラインにする必要があります。

私はGithubPagesへのデプロイのみを検討しているので（少なくとも今のところ）、SSRは必要ありません。 クライアントのためだけに構築する方法はありますか？

Gatsby v2のようですが、es6とcommonjsのインポートのどちらかを選択する必要があり、webpack4に関係する理由でそれらを混同することはできなくなります。

その場合、すでにes6インポートを使用していると仮定すると、@ jfaeldonのソリューションがここで使用するソリューションであり、@ hitchcottのソリューションは機能しなくなるように思われます。

誰かがそれを確認できますか？

@joshwcomeauはあなたに完全に同意します。また、ブラウザでのみdevを実行し、node.jsでビルドするのは良い考えではないと思います。 違いは非常に大きく、DEV環境とPROD環境の場合と同様に、環境をできるだけ類似させたいので、gatsbyも同じように実行し、devとbuildの両方を可能な限り類似した環境で実行する必要があると思います。

だから私はそれをブラウザでビルドを実行させることができますか？ SSRは必要ありません。

やあ、
私はここで同じ問題を経験しています、Coverflowはgatsby開発では正常に動作しますが、ビルドではエラーをスローします：
WebpackError：ウィンドウが定義されていません

     - react-coverflow.js:1 Object.<anonymous>
       ~/react-coverflow/dist/react-coverflow.js:1:330

     - main.js:1 Object.<anonymous>
       ~/react-coverflow/main.js:1:1

'react-coverflow'からCoverflowをインポートします。
'radium'から{StyleRoot}をインポートします

クラスTeamはReact.Componentを拡張します{

与える（）{
戻る（

displayQuantityOfSide = {2}
ナビゲーション
無限スクロール
enableHeading
アクティブ= {0}
メディア= {{
' @media （max-width：720px）'：{
幅：「100％」、
高さ：「200px」
}、
' @media （min-width：720px）'：{
幅：「100％」、
高さ： '400px'、
}
}}
>>

  </Coverflow>
</StyleRoot>
)

}
}

デフォルトのチームをエクスポートします。

いくつかのパッケージをインストールした後にこのエラーが発生したので、そのうちの1つに含まれている必要がありますが、問題がどこにあるのかわかりません。 どのnpmパッケージであるかをよりよく理解するためのヒントはありますか？ エラーはイライラするほど一般的です。

多分reactの実装はより良いですか？
https://react.semantic-ui.com/およびhttps://github.com/pretzelhands/gatsby-starter-semantic-ui

@wmlutz私が提供できる最も簡単な説明は、開発中のプロジェクトをビルドするためにgatsby developを発行するか、本番ビルドの場合はgatsby build && gatsby serveを発行すると、内部的にGatsbyが生成するためです。ページとcss、リンクなど。 ただし、これはクライアント側ではなく、サーバー側で行われることに注意してください。 したがって、ノードはこれらの特定のAPIにアクセスできません。これらは、クライアント専用であるためです。 そしてそれで、いくつかのパッケージは箱から出してギャツビーでうまく機能しません。 それらを「うまくプレイ」させるには、いくつかの変更が必要になる場合があります

@ jonniebigodes-ありがとうございます。 私は今_理由_を理解していると思います。 私のものは今_what_です。 私はばかげてたくさんの仕事をしました、そしてどのパッケージが問題を引き起こしているのかを特定するのに苦労しています。 より詳細なエラー報告でgatsby buildする方法はありませんか？

@jonniebigodes -私は、問題の原因となったパッケージを考え出し：乾杯を反応させます。 私の次の問題はそれを修正する方法を見つけることです。

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      ToastsStore.error("There was an error: " + result.msg)
    }
  }

@wmlutzは以下のコードブロックのようなものです。 reactは、最初の静的バンドルが受信された後にロードされます。 したがって、ユーザーが_handleSubmit到達するまでに、 windowが存在します。

react toastsがwindowでimport windowを呼び出す場合でも、エラーが発生する可能性があることに注意してください。

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      if (window) ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      if (window) ToastsStore.error("There was an error: " + result.msg)
    }
  }

同じ問題。 別のToastライブラリを見つけるか、自分で作成します。 私を殺すべきではありません。

@ joserocha3そのコードは、開発モードでのみ機能します。 本番ビルドへの呼び出しが発行されると、 error Building static HTML failedステージで失敗します。 Gatsbyがインポートをイントロスペクトし、問題のパッケージを探すと失敗します。これは、node.jsとAPIを使用しているため、そのパッケージのコードは非常に単純で、それほど問題はないはずです。あなたのケースに適応します。 リポジトリをフォークして、コードを確認し、機能するコンポーネントのセットを作成してみませんか？

フォークについては@jonniebigodesに同意します。 リポジトリのソースはほんの数ファイルです。 問題のある呼び出しは、 document内のToastsContainer.tsx document参照です。

または、上記のhttps://github.com/gatsbyjs/gatsby/issues/309#issuecomment-387039877をお試し

原因は、厳密モード、UMD、およびバンドルがどのように機能するかです。

patch-packageを使用する場合、フォークは必要ありません。

https://github.com/webpack/webpack/issues/6677およびリンクされている問題も参照して

これは、使用するコードtgatと、適切なチェックを行うか、 umdターゲットを使用して、グローバルオブジェクトを定義するかによって異なります。

こんにちは人々はまだ同じ問題を抱えています私は私のプロジェクトでウィンドウ関数を使用しませんでしたが、それでも私がこれを持っている理由は同じエラーをスローしています..？

1:09:03 AM：ビルドを開始する準備ができました
11:09:05 AM：ビルドイメージバージョン：9e0f207a27642d0115b1ca97cd5e8cebbe492f63
11:09:05 AM：ビルドイメージタグ：v3.3.2
11:09:05 AM：buildbotバージョン：75cd99f62ada9e21edea53208e8baf0eab85a045
11:09:06 AM：キャッシュされた依存関係を取得する
11:09:06 AM：194.6MBのキャッシュのダウンロードを開始
11:09:07 AM：1.636969993sでキャッシュのダウンロードを終了しました
11:09:07 AM：キャッシュの抽出を開始
11:09:17 AM：9.693656527sでキャッシュの抽出を終了しました
11:09:17 AM：11.478174001でキャッシュのフェッチを終了しました
11:09:17 AM：ビルド用のリポジトリの準備を開始
11:09:17 AM：Gitリファレンスの準備pull / 21 / head
11:09:18 AM：netlify.tomlが見つかりました。 サイト構成のオーバーライド
11:09:18 AM：ビルドスクリプトを開始しています
11:09:18 AM：依存関係のインストール
11:09:19 AM：キャッシュされたノードバージョンの復元を開始しました
11:09:22 AM：キャッシュされたノードバージョンの復元が完了しました
11:09:23 AM：v10.16.0はすでにインストールされています。
11:09:24 AM：ノードv10.16.0（npm v6.9.0）を使用しています
11:09:25 AM：環境から読み取ったrubyバージョン2.6.2を試行しています
11:09:27 AM：ルビーバージョン2.6.2を使用
11:09:27 AM：PHPバージョン5.6を使用
11:09:27 AM：キャッシュされたノードモジュールの復元を開始しました
11:09:27 AM：キャッシュされたノードモジュールの復元が完了しました
11:09:27 AM：キャッシュされたヤーンキャッシュの復元を開始しました
11:09:27 AM：キャッシュされたヤーンキャッシュの復元が完了しました
11:09:28 AM：Yarnバージョン1.9.4を使用したNPMモジュールのインストール
11:09:29 AM：ヤーンインストールv1.9.4
11:09:29 AM：警告package.json：ライセンスフィールドがありません
11:09:29 AM：警告パッケージ-lock.jsonが見つかりました。 プロジェクトには、Yarn以外のツールによって生成されたロックファイルが含まれています。 同期されていないロックファイルによって引き起こされる解決の不整合を回避するために、パッケージマネージャーを混在させないことをお勧めします。 この警告をクリアするには、package-lock.jsonを削除します。
11:09:29 AM：警告[email protected]：ライセンスフィールドがありません
11:09:29 AM：[1/4]パッケージを解決しています...
11:09:31 AM：[2/4]パッケージを取得しています...
11:09:31 AM：（node：1201）[DEP0005] DeprecationWarning：Buffer（）は、セキュリティと使いやすさの問題のために非推奨になりました。 代わりに、Buffer.alloc（）、Buffer.allocUnsafe（）、またはBuffer.from（）メソッドを使用してください。
11:10:04 AM：info [email protected]：プラットフォーム「linux」はこのモジュールと互換性がありません。
11:10:04 AM：info "[email protected]"はオプションの依存関係であり、互換性チェックに失敗しました。 インストールから除外します。
11:10:04 AM：[3/4]依存関係のリンク...
11:10:04 AM：警告「gatsby> [email protected]」には、誤ったピア依存関係「graphql@^0.12.0 || ^ 0.13.0」があります。
11:10:04 AM：警告「gatsby> [email protected]」のピア依存関係が正しくありません「graphql @ ^ 0.10.0 || ^ 0.11.0 || ^ 0.12.0 || ^ 0.13.0」。
11:10:04 AM：警告「gatsby> [email protected]」には、誤ったピア依存関係「graphql@^0.13.0」があります。
11:10:04 AM：警告「gatsby-plugin-netlify> [email protected]」には、満たされていないピア依存関係「webpack @> = 4.4.0」があります。
11:10:04 AM：警告「gatsby-plugin-sass> [email protected]」には、満たされていないピア依存関係「webpack@^3.0.0 || ^ 4.0.0」があります。
11:10:04 AM：警告 "> [email protected]"には満たされていないピア依存関係 "webpack @ ^ 2.0.0 || ^ 3.0.0 || ^ 4.0.0"があります。
11:10:04 AM：警告「netlify-cms> [email protected] "には満たされていないピア依存関係「immutable@^3.7.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected] "には満たされていないピア依存関係「netlify-cms-lib-auth@^2.0.4」があります。
11:10:04 AM：警告「netlify-cms> [email protected] "には、満たされていないピア依存関係「netlify-cms-lib-util@^2.1.0"」があります。
11:10:04 AM：警告「netlify-cms> [email protected] "には満たされていないピア依存関係「netlify-cms-ui-default@^2.0.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-emotion@^9.2.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「immutable@^3.7.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「netlify-cms-lib-auth @ ^ 2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「netlify-cms-lib-util @ ^ 2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-backend-git-gateway @ 2.2.0」には、満たされていないピア依存関係「react-emotion@^9.2.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「netlify-cms-lib-auth @ ^ 2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「netlify-cms-lib-util @ ^ 2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected] "には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0"」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「react-emotion@^9.2.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「immutable@^3.7.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-lib-auth@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-lib-util@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-emotion@^9.2.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「immutable@^3.8.2」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-lib-util@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-emotion@^9.2.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-immutable-proptypes@^2.1.0 "があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「netlify-cms-lib-util @ ^ 2.0.4」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-immutable-proptypes@^2.1.0 "があります。
11:10:04 AM：警告「netlify-cms> [email protected] "には満たされていないピア依存関係「moment@^2.11.2」があります。
11:10:04 AM：警告「netlify-cms> [email protected] "には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0"」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-date @ 2.1.0」には、満たされていないピア依存関係「react-emotion@^9.2.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「immutable@^3.7.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-file @ 2.2.0」には、満たされていないピア依存関係「react-emotion@^9.2.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected] "には、満たされていないピア依存関係「react-immutable-proptypes@^2.1.0"」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「immutable@^3.7.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-emotion@^9.2.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「immutable@^3.7.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-emotion@^9.2.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-immutable-proptypes@^2.1.0 "があります。
11:10:04 AM：警告「netlify-cms> [email protected] "には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0"」があります。
11:10:04 AM：警告「netlify-cms> [email protected] "には、満たされていないピア依存関係「react-immutable-proptypes@^2.1.0"」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「immutable@^3.7.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-emotion@^9.2.5」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-immutable-proptypes@^2.1.0 "があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「immutable@^3.7.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-emotion@^9.2.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-immutable-proptypes@^2.1.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「immutable@^3.7.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「react-emotion@^9.2.5」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「immutable@^3.7.6」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「react-immutable-proptypes@^2.1.0 "があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> [email protected]」には、満たされていないピア依存関係「netlify-cms-ui-default@^2.0.0」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-date> [email protected]」には満たされていないピア依存関係「moment @> = 2.16.0」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-markdown> [email protected]」には、満たされていないピア依存関係「immutable @> = 3.8.1」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-markdown> [email protected]」には、満たされていないピア依存関係「immutable@^3.8.2」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-markdown> [email protected]」に誤ったピア依存関係「slate@^0.32.0」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-markdown> [email protected]」には、満たされていないピア依存関係「immutable@^3.8.1」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-markdown> [email protected]」には、誤ったピア依存関係「slate@^0.33.3」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-markdown> [email protected]」には、満たされていないピア依存関係「slate-schema-violations@^0.1.7」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-markdown> [email protected]」には、満たされていないピア依存関係「immutable @> = 3.8.1」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-markdown> [email protected]」には、満たされていないピア依存関係「immutable @> = 3.8.1」があります。
11:10:04 AM：警告「netlify-cms> netlify-cms-core> redux-notifications> [email protected]」のピア依存関係が正しくありません「redux @ ^ 2.0.0 || ^ 3.0.0」。
11:10:04 AM：警告「netlify-cms> netlify-cms-widget-markdown> slate-react> [email protected]」には、満たされていないピア依存関係「immutable @> = 3.8.1」があります。
11:10:04 AM：警告 "> [email protected]"のピア依存関係 "react@^16.8.3"が正しくありません。
11:10:21 AM：[4/4]新しいパッケージを作成しています...
11:10:26 AM：56.59秒で完了。
11:10:26 AM：Yarnを使用してインストールされたNPMモジュール
11:10:26 AM：警告package.json：ライセンスフィールドがありません
11:10:26 AM：キャッシュされたgoキャッシュの復元を開始しました
11:10:26 AM：キャッシュされたgoキャッシュの復元が完了しました
11:10:27 AM：GOOSの設定を解除します。
11:10:27 AM：GOARCHの設定を解除します。
11:10:27 AM：export GOROOT = '/ opt / buildhome / .gimme / versions / go1.12.linux.amd64';
11:10:27 AM：export PATH = "/ opt / buildhome / .gimme / versions / go1.12.linux.amd64 / bin：$ {PATH}";
11:10:27 AM：バージョン>＆2;に移動
11:10:27 AM：export GIMME_ENV = '/ opt / buildhome / .gimme / env / go1.12.linux.amd64.env';
11:10:27 AM：バージョンgo1.12 linux / amd64に移動
11:10:27 AM：不足しているコマンドをインストールする
11:10:27 AM：実行ディレクトリを確認する
11:10:27 AM：ユーザーコマンドの実行：npm run build
11:10:27 AM：> [email protected] build / opt / build / repo
11:10:27 AM：> run-p build：**
11:10:28 AM：> [email protected] build：app / opt / build / repo
11:10:28 AM：> npm run clean && gatsby build
11:10:28 AM：> [email protected] clean / opt / build / repo
11:10:28 AM：> rimraf .cache public
11:10:32 AM：環境構成の使用： '本番'
11:10:32 AM：gatsby-configsのオープンと検証に成功—0.059秒
11:10:32 AM：プラグインのロードに成功—0.454秒
11:10:34 AM：PreInitでの成功—1.665秒
11:10:34 AM：以前のビルドからhtmlファイルとcssファイルを正常に削除—0.008秒
11:10:34 AM：キャッシュの初期化に成功—0.011秒
11:10:34 AM：gatsbyファイルのコピーに成功—0.035秒
11:10:34 AM：PreBootstrapでの成功—0.009秒
11:10:51 AM：成功ソースおよび変換ノード—17.231秒
11:10:52 AM：スキーマの構築に成功—0.896秒
11:10:55 AM：成功createPages —2.772秒
11:10:55 AM：成功createPagesStatefully —0.062秒
11:10:55 AM：PreExtractQueriesでの成功—0.006秒
11:10:56 AM：成功更新スキーマ—0.712秒
11:10:56 AM：コンポーネントからのクエリの抽出に成功—0.166秒
11:10:57 AM：graphqlクエリの実行の成功— 1.068秒— 1460 / 14601368.43クエリ/秒
11:10:57 AM：ページデータの書き込みに成功—0.035秒
11:10:57 AM：リダイレクトデータの書き込みに成功—0.001秒
11:10:57 AM：PostBootstrapでの成功—0.010秒
11:10:57 AM：情報ブートストラップが終了しました-28.304秒
11:12:14 AM：本番JavaScriptおよびCSSバンドルの構築に成功—76.329秒
11:12:14 AM：
11:12:14 AM：gatsby-plugin-purgecss：
11:12:14 AM：以前のCSSサイズ：305.33 KB
11:12:14 AM：新しいCSSサイズ：305.33 KB（-0.00％）
11:12:14 AM：約0.00KBのCSSを削除
11:12:14 AM：
11:12:23 AM：静的HTMLのビルドに失敗しました
11:12:23 AM：ヘルプについては、HTMLビルドのデバッグに関するドキュメントページを参照してくださいhttps://gatsby.app/debug-html
11:12:23 AM：48 | window.YouTubeIframeLoader = YouTubeIframeLoader;
11:12:23 AM：49 | }
11:12:23 AM：> 50 | }（窓））;
11:12:23 AM：| ^
11:12:23 AM：51 |
11:12:23 AM：
11:12:23 AM：WebpackError：ReferenceError：ウィンドウが定義されていません
11:12:23 AM：
11:12:23 AM：-index.js：50 Object ../node_modules/youtube-iframe/index.js
11:12:23 AM：[lib] / [youtube-iframe] /index.js:50:2
11:12:23 AM：
11:12:23 AM：-ブートストラップ： 19__webpack_require__
11:12:23 AM：lib / webpack / bootstrap：19 ：1
11:12:23 AM：
11:12:23 AM：-MediaAutoTrack.js：15 Object ../node_modules/@aws-amplify/analytics/lib/Providers/AmazonPersonalizeHelper/MediaAutoTrack.js
11:12:23 AM：[lib] / [@ aws-amplify] / analytics / lib / Providers / AmazonPersonalizeHelper / MediaAu toTrack.js：15：27
11:12:23 AM：
11:12:23 AM：-ブートストラップ： 19__webpack_require__
11:12:23 AM：lib / webpack / bootstrap：19 ：1
11:12:23 AM：
11:12:23 AM：-index.js：7 Object ../node_modules/@aws-amplify/analytics/lib/Providers/Amazon PersonalizeHelper / index.js
11:12:23 AM：[lib] / [@ aws-amplify] /analytics/lib/Providers/AmazonPersonalizeHelper/index.js:7:10
11:12:23 AM：
11:12:23 AM：-ブートストラップ： 19__webpack_require__
11:12:23 AM：lib / webpack / bootstrap：19 ：1
11:12:23 AM：
11:12:23 AM：-AmazonPersonalizeProvider.js：52 Object ../node_modules/@aws-amplify/analytics /lib/Providers/AmazonPersonalizeProvider.js
11:12:23 AM：[lib] / [@ aws-amplify] /analytics/lib/Providers/AmazonPersonalizeProvider.js:52:33
11:12:23 AM：
11:12:23 AM：-ブートストラップ：19 __webpack_require__
11:12:23 AM：lib / webpack / bootstrap：19 ：1
11:12:23 AM：
11:12:23 AM：-index.js：7 Object ../ node_modules / @ aws-amplify / analytics / lib / Providers / index。 js
11:12:23 AM：[lib] / [@ aws-amplify] /analytics/lib/Providers/index.js:7:35
11:12:23 AM：
11:12:23 AM：-ブートストラップ：19 __webpack_require__
11:12:23 AM：lib / webpack / bootstrap：19 ：1
11:12:23 AM：
11:12:23 AM：-index.js：33 Object ../node_modules/@aws-amplify/analytics/lib/index.js
11:12:23 AM：[lib] / [@ aws-amplify] /analytics/lib/index.js:33:10
11:12:24 AM：ステージ「サイトの構築」中に失敗しました：ビルドスクリプトがゼロ以外の終了コードを返しました：1
11:12:23 AM：
11:12:23 AM：-ブートストラップ： 19__webpack_require__
11:12:23 AM：lib / webpack / bootstrap：19 ：1
11:12:23 AM：
11:12:24 AM：ロギングをシャットダウンし、58件のメッセージが保留中

サーバー側にnetlifyを使用しています

ウィンドウを使用していないことが確実な場合は、パッケージが使用されている可能性があります。

webpackで空のウィンドウを定義する必要があります。

それは非常に簡単ではありませんが、これは正しい方向にあなたを導きます：

https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack

なぜこの問題が解決されたのかよくわかりません。 実際、この問題は、ギャツビーが懸念している場合におそらく最も重大な問題であり、その哲学全体を変更して修正する必要があります。

ブラウザとSSRロジックが結合されているのは本当に悪いことです。 開発ではコードの1つのバージョンを実行し、本番環境ではコードの分岐を実行するという事実は言うまでもありません。 これは本当に悪いです。 なぜそのようなビルドを作成するのですか？ これら2つの違いは、開発中のデバッグ機能、たとえばソースマップなどを有効にすることだけです。 これは本当にギャツビーを使うことを難しくそして魅力的にします。

私の意見では、これを再開し、この問題に優先順位を付ける必要があります。 この問題により、人々は文字通りウィンドウに依存する何千ものモジュールをあきらめ、それらのすべてがcomponentDidMountにインポートできるわけではありません（例：HOCのようなモジュールなど）。

私は同意しませんが、これは問題点です。 ウィンドウ変数の周りにロジックを使用して記述されたライブラリは、SSRの使用には適していないと主張する人もいるかもしれません。 これらのライブラリ自体は、ウィンドウが定義されているかどうかを確認し、SSRモードで動作する必要があります。

あなたがしているより深い点への他のコメントはありません、それはメンテナにより適した哲学的な議論です。

敬意を表して、あなたが書いたことは意味がありません。 「ブラウザのみ」のライブラリを構築している人が、ウィンドウオブジェクトが存在するかどうかを確認するのはなぜですか。 これを行うNPMレジストリ全体の単一のライブラリに名前を付けたりポイントしたりできますか？ それとも、人々が書いたすべてのライブラリが間違って書かれていると言っているのですか？

それとも、これを必要とする「ギャツビー」と呼ばれるフレームワークがあることを考慮する必要がありますか？ いずれかの端でギャツビーを使用できる必要があり、それらの端は完全に分離されている必要があります。 これが唯一のポイントです。 それについて哲学的なことは何もありません。

設計上、Gatsbyは静的サイトジェネレーターです。 それを達成するために行う作業のほとんどは、コンパイル時にブラウザーの外部で行われます。 それは「クライアント」または「ブラウザ」ツールだけではありません。

サーバー側のレンダリングは、定義上、「サーバー」側で実行されます。「ウィンドウ」は重要ではありません。

GatsbyのコンパイルはWebpackを使用して実行されます。デフォルトでは、webpackはウィンドウ変数を接続しません。 私の経験から、webpackで動作するようにクライアントライブラリを適応させる方法は1つだけではありません。 これにより、Gatsby構成自体は、「ウィンドウ」に依存するすべてのライブラリを修正するための単純なワンショットソリューションを提供できなくなります。

FWIWツールの一部を分離して、どの部分がやりたいことを妨げているかを議論するのは理にかなっていると思います。