Gatsby: エラー/ページリソース/が見つかりません。 Reactをレンダリングしない

ひや！

この問題は静かになりました。 不気味な静か。 👻

多くの問題が発生しているため、現在、30日間使用されなかった後に問題をクローズしています。 ここでの最後の更新から少なくとも20日が経過しています。
この問題を見逃した場合、または開いたままにしておきたい場合は、ここに返信してください。 この問題を開いたままにするために、「古くない」というラベルを追加することもできます。
わかりやすい注意として、この問題またはその他の修正された問題を確認する最善の方法は、プルリクエストを開くことです。 PRの開始、問題のトリアージ、および貢献の詳細については、 gatsby.dev / contributeを確認してください。

Gatsbyコミュニティに参加していただきありがとうございます。 💪💜

@antoinerousseauより良いスタックトレースを提供すると役に立ちますか？ 多分それは404だったか、多分ページデータが無効だったように。 現時点では、実際には違いは見られません。

前進するための最善の方法は何だと思いますか？ モバイルサファリ/サファリで自分で試してみましたか？

@wardpeetこれを調べてくれてありがとう。
Safariデスクトップで試してみましたが、再現できませんでした。 私はiPhoneを持っていません。
たまにランダムにしか発生しないため、どのように進めるかはわかりませんが、スタックトレースを改善しても問題はありません。
85％のMobile Safari、10％のSafari、5％のChrome Mobile iOSで、124回しか発生しなかったことに注意してください。 さまざまなバージョン。
また、URLは常に/とは限りません。 必要に応じて、Bugsnagアカウントへのアクセスを許可できます。

今日も同じバグレポートがあります。 あなたが一人ではないことをあなたに知らせるためだけに。

ひや！

この問題は静かになりました。 不気味な静か。 👻

多くの問題が発生しているため、現在、30日間使用されなかった後に問題をクローズしています。 ここでの最後の更新から少なくとも20日が経過しています。
この問題を見逃した場合、または開いたままにしておきたい場合は、ここに返信してください。 この問題を開いたままにするために、「古くない」というラベルを追加することもできます。
わかりやすい注意として、この問題またはその他の修正された問題を確認する最善の方法は、プルリクエストを開くことです。 PRの開始、問題のトリアージ、および貢献の詳細については、 gatsby.dev / contributeを確認してください。

Gatsbyコミュニティに参加していただきありがとうございます。 💪💜

やあまた会ったね！

この問題で何かが起こってから30日が経過したので、私たちのフレンドリーな近所のロボット（それは私です！）がそれを閉じます。
私はロボットにすぎないので、この問題を誤ってクローズした場合、私はHUMAN_EMOTION_SORRYことに注意してください。 他に必要な場合は、この問題を再度開くか、新しい問題を作成してください。
わかりやすい注意として、この問題またはその他の修正された問題を確認する最善の方法は、プルリクエストを開くことです。 PRの開始、問題のトリアージ、および貢献の詳細については、 gatsby.dev / contributeを確認してください。

ギャツビーコミュニティに参加していただき、ありがとうございます。 💪💜

同じことを見て。

• それはかなり頻繁です（私たちは毎日それを見ています）。
• ほとんどすべてのモバイルSafariまたはSafari。
• ほとんどの場合/ですが、他のページはめったにありません。
• Sentryは、Bugsnagと同じスタックトレースを次のブレッドクラムで提供します。
  

こっちも一緒。 / index以外のページの場合。

端末
ブランド| Huawei
家族| DRA-LX5

OS
名前| アンドロイド
バージョン| 8.1.0

ブラウザ
名前| Chrome Mobile WebView
バージョン| 70.0.3538

SDK
名前| sentry.javascript.browser
バージョン| 5.12.1

ひや！

この問題は静かになりました。 不気味な静か。 👻

多くの問題が発生しているため、現在、30日間使用されなかった後に問題をクローズしています。 ここでの最後の更新から少なくとも20日が経過しています。
この問題を見逃した場合、または開いたままにしておきたい場合は、ここに返信してください。 この問題を開いたままにするために、「古くない」というラベルを追加することもできます。
わかりやすい注意として、この問題またはその他の修正された問題を確認する最善の方法は、プルリクエストを開くことです。 PRの開始、問題のトリアージ、および貢献の詳細については、 gatsby.dev / contributeを確認してください。

Gatsbyコミュニティに参加していただきありがとうございます。 💪💜

まだ問題です。

私もこの問題を抱えています。 gatsby developは正常に機能しますが、 gatsby buildを使用すると、アプリケーションが「エラー：ページリソースが見つかりません。Reactをレンダリングしていません。」 ビルド自体が成功したとしても、実行時に。

これは、Typescriptを使用していることが原因でしょうか？

gatsby clean実行してみました

更新/考えられる解決策：「。env.production」ファイルではなく「.env.development」ファイルしかないため、エラーが発生しました。 なぜこれがそのような曖昧で紛らわしいエラーを引き起こし、Reactがレンダリングするのを妨げたのか分かりません。 期待される動作は、 gatsby developを実行したときに発生する動作と同じになると思います。 gatsby developを実行し、.env.developmentファイルがない場合でも、Reactはレンダリングされますが、重要な値が欠落しているため、アプリがクラッシュします。

同じ問題があります。 私のアプリはawsでホストされ、cloudfrontを使用しています。 存在しないすべてのURLをステータス200の404.htmlページにリダイレクトするポリシーがmy-test-site.com/some-not-existed-page window.pagePathなり/404.htmlが正しいであるが、 publicLoader.loadPage somewhy試行をロードしない404.htmlページコンテンツ、ただし/my-test-site.com/some-not-existed-page 。 実際、 window.location.pathname使用しますが、 window.pagePathは使用しません

今日、セントリーで同じエラーメッセージが表示されました：見つかりません。 Reactをレンダリングしない

私もこの問題に直面していました。 私にとっては、 pages/index.jsファイル内の独自のコンポーネントに名前付きインポートを使用すると再現可能

例
import Layout from "../components/Layout"; ✅
import { Layout } from "../components"; 🚫

components/index.jsは次のようになります。

import Layout from "./Layout"

export {
  Layout
};

これはMacOScatelina＆chromeバージョン80.0.3987.149でした。
"gatsby": "^2.20.13",

注意すべき重要な点は、私はexpogatsbyバリアントを使用しているということです。

クリーンなgatsby buildを実行しているときにもこの問題が発生しました。根本的な原因は、 acornパッケージの脆弱性に対するpackage.jsonの解決でした（https://snyk.io/vuln/npmを参照）。 ：どんぐり）：

"resolutions": {
   "acorn": "^7.1.1"
}

この解決策を削除すると、問題が解決しました。

gatsby infoからの出力：

  System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  Browsers:
    Chrome: 81.0.4044.92
    Safari: 13.1
  npmPackages:
    gatsby: 2.20.20 => 2.20.20 
    gatsby-plugin-material-ui: 2.1.6 => 2.1.6 
    gatsby-source-graphql: 2.4.0 => 2.4.0 

まだたくさん起こります（先週で4,500回以上）：

モバイルSafariのスタックトレース：

.cache/production-app.js:128:12

126  publicLoader.loadPage(browserLoc.pathname).then(page => {
127    if (!page || page.status === PageResourceStatus.Error) {
128      throw new Error(
129        `page resources for ${browserLoc.pathname} not found. Not rendering React`
130      )
131    }

Chrome Mobileのスタックトレース：

/app-ac76ae7860adc4ef4414.js:1:179819

パン粉：

時間| タイプ| エラー| 情報
-| -| -| -
4ms前| リクエスト| XMLHttpRequestエラー| GET /page-data/app-data.json
5ms前| リクエスト| XMLHttpRequestエラー| GET /page-data/index/page-data.json
6ms前| リクエスト| XMLHttpRequestエラー| GET /page-data/app-data.json
7ms前| リクエスト| XMLHttpRequestエラー| GET /page-data/index/page-data.json
10ms前| リクエスト| XMLHttpRequestエラー| GET /page-data/app-data.json
10ms前| リクエスト| XMLHttpRequestエラー| GET /page-data/index/page-data.json

それらのほとんどは、MobileSafariとChromeMobileで発生します。

ギャツビーバージョン：2.20.13

この解決策を確認してください。
https://github.com/gatsbyjs/gatsby/issues/11461#issuecomment -459732145

私はgatsby-plugin-offline使用しないので、サービスワーカーはいません。

何か進展はありますか？ 問題が発生していて、プラグインがオフラインになっています。プラグインを無効にして、エラーが発生するかどうかをテストできません。

これはオフラインプラグインとは何の関係もないと思います。 これらのエラーがたくさん発生しており、使用したことはありません。

再現するには：

• [例は不要になりました。以下を参照]に移動し、コンソールのエラーと機能しないReactに注意してください。
• 左上にロゴが表示されているホームページに移動します。
• ヘッダーの[調査]をクリックして、元のページに戻ります。 ページが機能し、パネルが折りたたみ可能になりました。

これをデバッグするにはどうすればよいですか？ 404などのネットワークリクエストがないので、何が起こっているのかわかりません。 ローカルバージョンは次のとおりですが、ビルドはNetlifyで行われます。

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.122
    Firefox: 75.0
    Safari: 13.0.5
  npmPackages:
    gatsby: 2.21.1 => 2.21.1
    gatsby-image: 2.4.0 => 2.4.0
    gatsby-plugin-graphql-loader: 1.0.2 => 1.0.2
    gatsby-plugin-module-resolver: 1.0.3 => 1.0.3
    gatsby-plugin-page-creator: 2.3.0 => 2.3.0
    gatsby-plugin-react-helmet: 3.3.0 => 3.3.0
    gatsby-plugin-sharp: 2.6.0 => 2.6.0
    gatsby-plugin-typescript: 2.4.0 => 2.4.0
    gatsby-source-contentful: 2.3.1 => 2.3.1
    gatsby-transformer-remark: 2.8.0 => 2.8.0
    gatsby-transformer-sharp: 2.5.0 => 2.5.0

この例では、デフォルトのエクスポートとしてページがあり、ページファイルにも名前付きのエクスポートがありました。 ページファイルの外部から名前付きエクスポートを参照するものがあるとすぐに、非常に混乱しました。

修正は、デフォルトの実際のページコンポーネントのエクスポートを除くすべてのエクスポートをページから削除することでした。

@thekevinbrownあなたが見ていたエラーは断続的でしたか？ それとも毎回起こりましたか？

問題のあるページを開始または更新するたびに@Undistraction 。 別のページから始めたり、ページから作業ページに移動したりしてから戻った場合は、問題ありませんでした。 したがって、この場合、基本的に最初のハイドレーションは失敗しますが、ハイドレーションが機能する別のページにユーザーを誘導できる場合は、壊れたページのダウンロードと表示が機能します。

可能であれば、あいまいなランタイムエラーではなく、明確なビルドエラーとして間違いなく優れていたでしょう。

@thekevinbrownなので、あなたの問題はこの問題とは無関係だと思います（これは、誰も確実に再現できなかった断続的なエラーです）。したがって、同じエラーが表示されても、原因は異なると思います（ありがたいことに、簡単に修正できます）。

私たちの製品サイトでこのエラーが発生し、最新のGatsbyバージョン（わずか2日前にリリース）にアップグレードすると、Safariのバグが修正されました

最新のギャツビーバージョンにアップグレードしました。 それでも問題が発生する

私はこれまでこれを経験したことがありません。 突然それは毎回起こります。 本番環境でのみ😢
これは、20時間前の更新後に発生しました。 依存関係は定期的に更新しています。
つまり、基本的にプロジェクトはダウンしていて、どうすれば再び機能させることができるのかわかりません。

更新を20時間前の状態に戻してみました。 助けにはならなかった。
8日前に戻しても効果はありませんでした。

これが新しいアップデートのプロジェクトです： https ：//vermehrungch-4utm3ymcd.now.sh/Vermehrung/
そしてここに8日前からの最後の作業があります： //vermehrungch-9l709pu84.now.sh/Vermehrung/

gatsbyの依存関係を9日前の状態に戻すと、新しいビルドが再び機能するようになりました😆

ここで、gatsbyの依存関係が原因であるものを特定しようとします。

わかりました、私たちの場合：

• 間違いなくギャツビー自体が原因です
• 2.20.36までのバージョンが機能する
• v2.21.2およびv2.21.3に上記のエラーがあります（以前にv2.21.17をテストしましたが、同じエラーです）
• v2.21.0には別のエラーがあります：
  idb-keyval-iife.min.js:1 Uncaught (in promise) DOMException: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing. at https://vermehrungch.gabriel-software.now.sh/idb-keyval-iife.min.js:1:353 at new Promise (<anonymous>) at https://vermehrungch.gabriel-software.now.sh/idb-keyval-iife.min.js:1:323 at async Object.handle (https://vermehrungch.gabriel-software.now.sh/sw.js:162:21)

更新：gatsbyv2.21.19でもエラーが発生します

@barbalexあなたのサイトを私たちと共有できますか？ プライベートの場合は、 ward @ gatsbyjs.comにメールを送信して

デバッグすると、サイトでこのエラーが発生します

[].concat(function(e) {
                if (Array.isArray(e)) {
                    for (var t = 0, n = Array(e.length); t < e.length; t++) n[t] = e[t];
                    return n
                }
                return Array.from(e)
            }(Object.keys(it.propTypes)), ["children"]);

スタックトレース：

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Module.zJQU (VM54 component---src-pages-vermehrung-js-c3ca1cb1b4686475777d.js:13787)
    at c (webpack-runtime-2b4bd8eda0563b1ea7e6.js:1)

サイトは次のとおりです。

• https://vermehrung.ch
• https://github.com/barbalex/vermehrung
• メールで送信されたパスワードを使用してログインすることもできます

このサイトは開発中です。 したがって、データを編集することもできます。

Sentryでも同じエラーメッセージが繰り返し表示されます。

gatsbyバージョン「2.21.22」を使用しています。

同じ問題が発生し、上記のv2.20.36にダウングレードすることで修正しました。

わかりました、私たちの場合：

• 間違いなくギャツビー自体が原因です
• 2.20.36までのバージョンが機能する
• v2.21.2およびv2.21.3に上記のエラーがあります（以前にv2.21.17をテストしましたが、同じエラーです）

バージョン2.21.12の別のプロジェクトでこれに再び遭遇しました。 これは本番環境でのみ発生するため、_本当に_悪いです。 このバグを優先してください。

これはhttps://www.voteamerica.com/で本番ます。 これは主にモバイルSafariで発生しますが、Android Chrome、デスクトップSafari、デスクトップChromeなどでも発生しています。 現在Gatsby2.21.40を使用していますが、2.20.12でも問題が発生していました。

最近削除された1ページで同じ問題が発生しました。 https://intergiro.com/legalは、期待どおりにカスタム404ページを表示しません（デスクトップChrome、Gatsby2.20.8）。 本番環境でも発生します。

私の場合、 @ Kanunyのコメントは間接的に私の問題を解決しました。 publicLoader.loadPageがページデータをフェッチしようとしたときに、誤ってページデータのJSONをHTMLファイルにリダイレクトしました。 リダイレクトを修正した後、ページデータのJSONが正しく読み込まれ、すべてが通常どおり機能します。

バグは突然再び消えました。 キャッシュなどにリンクされているようです

このエラーは、FirefoxおよびChromeの最新バージョンの2.22.12バージョンでも引き続き発生します。

直してください！

直してください！

@SoldierCorpは、オープンソースとは何かを読んで、自分で修正してみてください。

@antoinerousseauそれはまた、助けを必要としている人たちが助けを求め、方法を知っている人たちがそれを提供する、互いに

@andrzejwpはい、それはお互いに助け合うことであり、「修正してください」のような

他の人は、それが彼らにどのように影響するかについての詳細な洞察でコメントしました。それは、貢献者が彼らを助け、うまくいけばOSSの問題を修正するために必要です。

@antoinerousseauこの問題によって提供される情報がなくなったため、これに関連する有用な情報がなくなったため、他の人が書いているのと同じことを繰り返さないように、最後まで同じであると書きました。最新バージョン。

より多くの人々がまだ問題を経験していて、まだ修正されていないことをギャツビーに知らせるためだけです。

ご迷惑をおかけして申し訳ありませんが、私はフレームワークを使用していて、自分で問題を修正する時間がない通常のユーザーです。

私の場合、gatsby-plugin-ipfsを使用しようとしているため、これはパスにプレフィックスを付けるときにのみ発生していました（ gatsby build --prefix-paths && gatsby serveを実行すると、すべての「エラー/ページリソースが見つかりません。Reactがレンダリングされません」が発生します。ページ）。
ただし、index.jsxページでは、ページクエリを実行していませんでしたが、useStaticQueryフックからのstaticQueryを含むコンポーネントがありました。
このコンポーネントをコメントアウトして再構築すると、エラーはなくなります。
興味深いことに、このコンポーネントのコメントを解除して再構築すると（サイトが初期状態に戻るため）、正常に実行され、「エラー/ページリソースが見つかりません。Reactをレンダリングしません」というエラーは発生しません。ビルドキャッシュに重要なものが含まれていることを示唆していますか？

したがって、これが発生する可能性がある理由についての私の（大まかな）考えは次のとおりです。

• 静的クエリを含むがページクエリを含まないインデックスページに問題がありますか？
• ビルドプロセスの順序に関する問題（キャッシュによって結果が変更される可能性があるため）。
• キャッシュのおかげでスキップされたように見える唯一のステップであるため、ビルドプロセスでのrun static queriesまたはGenerating image thumbnails問題の可能性があります。

誤ってページデータのJSONをHTMLファイルにリダイレクトしました

ここでも同様の状況です。 基本的に、nginx locationディレクティブの正規表現は、必要のないときに/page-data/items/page-data.jsonとも一致していました。 正規表現の先頭に^を追加すると、意図しない一致が回避されました。

これはhttps://www.voteamerica.com/で本番ます。 これは主にモバイルSafariで発生しますが、Android Chrome、デスクトップSafari、デスクトップChromeなどでも発生しています。 現在Gatsby2.21.40を使用していますが、2.20.12でも問題が発生していました。

また、同じ問題に直面しています。

こんにちはギャツビーチーム、こんにちは皆さん。 この問題で表面化したさまざまなエラーの原因であると思われるloadPageで返されたエラーを指定することは可能でしょうか？

関数への参照： https ：

この関数はapp-data.json 、 page-data.json 、次にJSコンポーネント自体を読み込もうとするため、ネットワークの問題、サーバーの構成の問題、開発の問題、構成の問題が発生しやすいと理解しています。エラーメッセージを指定することで、根本的な問題を簡単に修正できます。

（参考：この問題が当社のWebサイトで最後に発生したのは、循環インポートが原因でした）

v2.23.12で再試行しました。 同じ結果： https ：

2.20.36を超えるすべてのバージョン以降、私たちには完全に体系的であるように見えます。 gatsbyを使用して構築された5つのアプリすべて。 そのため、それ以降、更新はブロックされています。

これは少し問題になり始めています。 たとえば、v3（https://github.com/gatsbyjs/gatsby/issues/15601）でcore-jsを使用するライブラリの使用はブロックされています。 この問題は解決されました-アップグレードできれば。

情報やテストなどを手伝う方法があれば、喜んでお手伝いします。

@barbalexアプリに次のエラーがあります。

間違いなくこのエラーを表示する必要があります。 PRを自由に追加してください。このATMを実行するのに十分な帯域幅がありません。

この問題は、このライブラリがサーバー側で使用されている場合のhttps://github.com/vkbansal/react-contextmenu/issues/284 ）が原因であると思われ

@wardpeet

PRを自由に追加してください。このATMを実行するのに十分な帯域幅がありません。

申し訳ありませんが、そのための十分な灰色のセルがないようです😢
たぶん@ b4stienは

この問題は2.23.21バージョンでも引き続き発生します

私はこれに対する包括的な解決策を持っていませんが、私は今朝初めてこの問題を抱えていることを知ってもらいたかっただけです。

そして、私はなんとかそれを「修正」することができました。

このサイトは、「Cloudways」と呼ばれるプロバイダーを介してAWSでホストされています。

最初のテストとして、私はサイトをNetlifyにデプロイしました-そしてすべてがうまく機能しました。

少し掘り下げたところ、「Varnish」と呼ばれるものを使用したサーバー側のキャッシュの問題があるようでした。

私は最初にそれを「パージ」しようとしましたが、何も起こりませんでした-しかし、それを無効にしてから再度有効にするとうまくいきました。

このサイトは、定期的に更新されるこの環境で約18か月間問題なく存在しており、この問題に遭遇したのはこれが初めてでした。

最近アップグレードしました：
Gatsby CLIバージョン：2.12.59

これが何らかの効果をもたらしたかどうかはわかりませんが、私が考えることができる唯一の変更です-もちろん、ホスティング側に変更があった場合を除きます。

うまくいけば、これはそこに誰かを助けるでしょう🤷

編集：

「ワニス」キャッシュを再度有効にすると、5分以内に問題が再発しました。

今のところ、この機能を無効にしました。

私たちの場合、 /pagesフォルダーから作成されたすべてのページは機能しますが、 createPagesによって作成された残りのページは再水和に失敗します。
ローカルとCIの両方でこの問題が発生しています。

私たちの場合、 createPagesで作成されたすべてのページは、すべてのページに/${locale}/プレフィックスを付けた国際化を使用しています。

私たちの場合、 createPagesで作成されたすべてのページは、すべてのページに/${locale}/プレフィックスを付けた国際化を使用しています。

これに対する解決策を見つけましたか？ 多くのロケールでこの設定もあります

@kdichevいいえ、解決策が見つかりませんでした。 gatsbyチームがライブラリレベルでこれを修正するのを待っています。

問題がどこにあるのかまだよくわかりません。喜んでPRを行いますが、根本的な問題がどこにあるのかを見つけてもらいたいですか？

やあみんな、私はIE11を使用した本番環境でこの問題に直面しています。

"ギャツビー"： "^ 2.23.11"

また、IE11のすべてのページの空白（ハイドレーションなし）の結果に直面しています。
のページリソース/見つかりません。 反応をレンダリングしない

ギャツビーv2.24.2

編集：以前の機能バージョンv2.22.11に戻しました。 ie11はそのコミットで機能し、正しく機能したので、package-lock.jsonとnpm ciを保持した場合にのみ、現在も機能しました。 どういうわけか、これがギャツビーの間違いだとは思わないので、関連する可能性のあるダウンストリームの変更をいくつかリストします。
（動作バージョン->失敗したビルドバージョン）
ie11の失敗のみの候補となる可能性が高い大きなもの：
@ babel / core 7.10.0-> 7.10.5
@ core / js 2.6.11-> 3.6.5
gatsby-legacy-polyfills new dep 0.0.2

その他の可能性は低い：
@ graphql-tools / schema new dep 6.0.14
@ graphql-tools / utils new dep 6.0.14
そして、vscodediffツールですべての赤->すべての緑をふるいにかける私の忍耐力が尽きました

その他の注意事項：gatsby build && gatsbyserve -H 0.0.0.0でエラーを再現したので、サーバー環境側のものは除外されます。

編集2：私の投稿で最初に報告されたfaulyv2.24.2ビルドのビルド出力は10mbから30mbになりました。 アプリには約20のバージョン（{hash} .js）、2つのコモンズ（{hash} .js）、さまざまな数のpages.jsがあります。 まったく同じファイルではないようで、以前のビルドと一致するように日付が付けられています。 したがって、gatsby buildは、利用可能なすべての古いバージョンを取得し、それらを/ publicにチャックしたように見えます。

誰かがリポジトリを共有できますか？

@roffelsaurusあなたは
私たちにとって、2.24.2はci / cdサイプレステストで失敗しています。

誰かがリポジトリを共有できますか？

リポジトリと変数を非公開で共有できます。問題がなければ、konstantinにメールを送ってください。 [email protected]と私はあなたを私たちのghに招待します

@wardpeetこの問題は、問題＃25766に関連するアクセス権を付与したリポジトリでテストできます。

私の場合、問題はimport順序と、サーバー側のレンダリング環境で一部のライブラリ（つまりreact-leaflet ）が処理される方法に関連していました。 リーフレット自体の前にリーフレットプラグインをインポートして、後で問題を引き起こしました。 どこを見ればいいのかがわかれば、かなり早く修正できました。

ただし、生成されたエラーメッセージ（ page resources for / not found. Not rendering React ）は非常に紛らわしく、詳細の欠如やその他のエラーが主な問題であったと思います。

この問題を抱えている他の人へ：どうやってそれを見つけたのですか？ Chromeでの古き良きブレークポイントとデバッグ。 gatsby build && gatsby serveは、すべてのソースマップが配置された状態で、本番環境をローカルで表示できるようにしました。 どのチャンクをデバッグできたのですが、コンポーネントの読み込みに失敗し、内部のインポートが混乱しました。 それはかなり遅いプロセスだったので、何度も何度もページをリロードするので、しばらくお待ちください。 チャンク名（私の場合はcomponent---src-pages-index-js ）とそれに割り当てられたインポートを探します。 それらの1つが失敗するので、それに足を踏み入れて、その依存関係を観察してください。 いずれの場合も異なると思いますので、どこにも良い解決策が見つからないのです。 ソースマップは、配列内の一連の一般的な約束以上のものを示してくれたので便利でした。

これはトピックの核心ではありませんが、私が見つけたものの詳細を以下に残しておきます。 ただし、以下はreact-leafletのみに固有であり、マイレージは異なることに注意してください。

だから、これは元々の方法です：

import { Map, Marker, Popup, TileLayer } from 'react-leaflet'
import "leaflet-control-geocoder/dist/Control.Geocoder"
import L from "leaflet";

これが今の様子です：

import { Map, Marker, Popup, TileLayer } from 'react-leaflet'
import L from "leaflet";
import "leaflet-control-geocoder/dist/Control.Geocoder"

もちろん、これは私たちの側のエラーです。プラグインは通常、プラグインされているライブラリの後に来るはずだからです。 react-leaflet （私は思う）はデバッグの実行時にロード順序を少し変更するため、開発中に問題は見られませんでした。

アプリでUncaught (in promise) Error: page resources for /app/ not found. Not rendering Reactをデバッグしました。 私の場合、/ app /はreactアプリを含むクライアント専用ルートです。 gatsby developで問題はありませんgatsby serveを実行しているとき、および本番ビルドでもこのエラーが発生しました。 ビルドエラーは報告されていません。

問題は、@ barbalexも遭遇したreact-contextmenu（https://github.com/vkbansal/react-contextmenu/issues/284）にあったことが判明しました。 これがreact-contextmenuの「障害」であるかどうかはわかりません...ライブラリはメンテナを探しているようで、作成者はおそらくサーバー側ではなくクライアント側の実装に焦点を合わせていました。 これをデバッグしやすくするためにgatsbyができることがあるかどうかはわかりませんが、エラーメッセージはあまり役に立ちませんでした。

@rgembalik 、これをデバッグする方法は、アプリコンポーネントからすべてのコンポーネントを削除し、

私にとっては、複製することすらできません。歩哨エラー報告にこれらのエラーがたくさん表示されます。 どうやって理解するのかわからない

Sentryでこれらのエラーが多数発生し、「/」以外のすべての種類のページでもこれらのエラーが発生し、複製できませんでした。 Netlifyでホストされています。 デプロイ中のアクティブなセッションと関係があるのではないかと思いますが、確認するのは困難です。

@wardpeetは、これと同じエラーを引き起こすさまざまな潜在的な原因がたくさんあるようです。 私たちにとって、これらのエラーはSentryログにのみ表示され、再現することはできませんでした。 エラーにさらに多くの情報を含めること、または複数のより詳細なエラーを追加して、原因を突き止めるために私たち全員がさらに何かを続けることができるでしょうか？

https://www.gatsbyjs.com/でこのエラーが発生し、空白のページになってしまいました

最初の最初のページの読み込み時に、gatsbyjs.comでこのエラーが発生したことを確認できます。

Gatsbyには、末尾にスラッシュが付いたURLパスを処理する特定の方法があることがわかりました。 これが役立つかどうかわかりません

私もこの問題を抱えています。

リポジトリを共有できませんが、このページにアクセスすると、SVGが正しく読み込まれていることがわかります。 しかし、存在しないルート（ https://rocketseat.com.br/testなど）に移動すると、古いバージョンのコード（SVGの代わりにgatsby-image使用している）が表示され、次のように表示されます。コンソールにこのメッセージを表示します。

Error: page resources for /test not found. Not rendering React

[email protected]を使用してい

_edit：理由はわかりませんが、ここに問題を追加した後、画像の問題は解決しましたが、コンソールページで同じエラーが引き続き発生します_

複製するのは難しいですが、歩哨エラーレポートにこれらのエラーがたくさん表示されます

@ theskillwithin-同じ。 セントリーでこれらの数千。

私は同じ問題を抱えています。 非常に奇妙な。 このエラーを引き起こすさまざまな原因があるようです。

また、このエラーはさまざまなブラウザやさまざまなページで発生しています。 私たちの状況を前述の考えられる原因のいずれにも関連付けることができないようです。 また、開発中に複製することはできないようです。展開されたWebサイトでのみ発生します。

私は同じ問題を抱えています。 複製することはできませんが、歩哨でこれらのエラーが大量に発生します。 また、さまざまなブラウザ
gatsbyバージョン2.24.3

これらは、私がSentryを使用している本番サイトでも半頻度で報告されています。 自分を複製できません。 私の見方では、より良い報告が必要です。 それについて奇妙なのは、実際にページデータを見つけることです。

200ステータスとAFAICTを受け取っているので、jsonは不正な形式ではないので、 fetchPageDataJson()が成功応答を返していると思います。
https://github.com/gatsbyjs/gatsby/blob/90e66c7fcdc7a75185bdaa336b0f9bdec9762585/packages/gatsby/cache-dir/loader.js#L137 -L151

それだけは成功しているように見えるので、私が見ることができる次の失敗点は、コンポーネント自体のロードです。
https://github.com/gatsbyjs/gatsby/blob/90e66c7fcdc7a75185bdaa336b0f9bdec9762585/packages/gatsby/cache-dir/loader.js#L438 -L448
https://github.com/gatsbyjs/gatsby/blob/90e66c7fcdc7a75185bdaa336b0f9bdec9762585/packages/gatsby/cache-dir/loader.js#L235 -L241

おそらく、書き出されているasync-requiresに問題があります。 ただし、Webpackによって処理され、問題が断続的に発生するため、実際には問題ないと思います。 ファイルの書き方に問題があった場合、ビルドが爆破されます。

これがインポートされるモジュールのどこかにある種の構文の問題である場合、100％の確率で失敗すると思います。 おそらく、モジュールで使用されているものが、そのモジュールをロードしているデバイス/ブラウザと互換性がないものがあります。 特定のエラーが不明瞭になっているので、確かにわかりにくいです。

必要だと思うのは、生成されたエラーを食べないためのコンポーネントローダーです。

持つPromise.resolve()チャンクが存在しないとき、そこにasyncRequiresスローされたエラーが理にかなって意味します。 そのエラーは、そのページにアクセスするたびにスローされるため、原因を突き止めるのは簡単です。

そこでcatchブロックにnullを返すことは、スローされたエラーが意味をなさないことを意味します。 モジュールが見つかりましたが、動的インポート中にエラーが発生しました。 webpackは動的インポートのcatch()ブロックでエラーを返しませんか？ そうでない場合は、おそらくこれはWebpackで取り上げるべき問題です。 devtoolsから不正なimport()を実行すると、エラーが報告されることを知っています...インポートされているJavaScriptを解析できない/失敗したことに基づいてエラーが報告されるかどうかは別の質問であり、一部のコードを使用した追加のテストは、特定のブラウザでは機能しません。

@wardpeetは、以前にエラー報告の改善について言及しました。 それは作業中ですか、それとも助けが必要ですか？

ブラウザの互換性に関しては、これらのエラーは主にモバイルデバイスによって生成されます。

しかし、Safariを使用するMacOS X、およびChromeを使用するWindows10で生成されるこれらのエラーも確認しました。

1つの共通点は、トラフィックが一般的にFacebookまたはGoogleから発信されているように見えることです。 しかし、それは偶然かもしれません。なぜなら、それらが私たちのトラフィックの大部分を動かすものだからです。

_注：私が使用しているこのサイトは実際には[email protected]を使用しているため、リンクしたコードはさまざまな場所にありますが、ロジック自体は変更されていないようです。 それはまだ同じことをしていて、私が特定した潜在的な障害点は同じようです。_

[email protected]

また、bugsnagでエラーが発生することはめったにありません。 ページがレンダリングされているかどうかがわかりません。 @wardpeetに役立つ場合は、bugsnagのスタックを次に示します。興味深いことに、この場合は何度か再試行したようです。 これは、createPage（）を使用する多くの/ webinar / blah ...ページの1つですが、もちろん、写真に示すように/ page-data / ...を取得しようとすると機能します。

ログに記録されたエラーにいくつかの情報を追加しますので、うまくいけば、問題を見つけることができます

https://github.com/gatsbyjs/gatsby/issues/26706に投稿された別のバグを発生させたページで同じ問題が発生してい

私の場合、それは（少なくとも）デスクトップクロームで発生し、ページを最初にロードしたときにのみ発生します。更新を押すと、すべてが期待どおりにレンダリングされます

次に、 incognitoモードを使用して、考えられるすべてのキャッシュを消去しようとしても、それを初めて複製しようとすると、しばらくすると（非常にランダムに実行できた場合もあります）、しばらくすると実行できなくなります（数日）URLにアクセスすると、同じエラーが見つかりました（再度更新すると消えます）

上記のリンクされた問題に使用したのと同じ最小限のリポジトリで複製しようとすると、同じエラーが表示されません（少なくとも今試した回数では）

エラーは（この場合）石積みグリッドが作成されていないために表示されます。私の場合、ユーザーがページの更新を考えない限り、ページが破壊されます（そうは思わない）。

実際、それは私が数週間それを見ているほどランダムに感じます、しかし私はいつもこれが私のPCで何かであると思っていました

npm auidit fixを実行しましたが、問題は修正されました。

以下！ 同じ問題があります

こんにちは、

この問題は本番環境でも発生しています。 このバグは、特定のURLの100％の確率で再現されます。 publicディレクトリのツリー構造を見てみましょう。

public
  icons
  page-data
  usages
    brainstorming
      page-data.json
    seminaries
      page-data.json

これらのURLをhttps://domain.com/usages/brainstormingと入力すると、 https://domain.com/usages/seminariesも完全に機能します。 https://domain.com/doesnotexistような不明なURLを入力すると、404ページが表示されますが、 https://domain.com/usagesように、ツリー内の実際のフォルダーと一致するURLに到達しようとすると、この空白のページが表示されます。そしてこのエラー。

それはあなたに鐘を鳴らすかもしれませんか？

ベスト

@guillaumepotier yaはnginxも使用するのでしょうか？

応答ヘッダーの誤りが原因である可能性があります。

@ daydream05はい、確かにnginxを使用しています。 ログには、変更されていない304のコンテンツヘッダーがいくつかあり、場合によっては200の応答があります。

AWSS3バケットを使用する

ここでも同じですが、AWS S3（CloudFront CDNを使用）でホストしています。

npm audit fixを実行しましたが、問題は修正されました。

興味深い@ liuuuk311。 私は私たちのプロジェクトでそれを試しました、そしておそらくそれは私たちのためにも問題を解決しました。 時間はわかりますが、48時間後のこれまでのところ、ログには何も発生していません。

編集：5日後、まだ発生していません...

編集：10日後、それは再び数回発生しました、報告して申し訳ありません。 npm audit fixを実行しても、問題は解決しないようです。

@wardpeet診断に役立つ可能性のあるいくつかの追加のバグナグデータ...

これらによると、page-data.jsonファイルが実際に正しくロードされているようです...

• 今日はこれに困ったので、ぶつかって*ここで見ます。

私の場合、polyfill.iolibをページにロードする問題を修正しました

<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1"></script>

@pedrofsantoscomは、静的にロードされたスクリプトがgatsby.jsの問題をどのように解決したかを説明してください。

昨日同じ問題がありました。 キャッシュをクリアすると、現在のユーザーのキャッシュがローカルで修正されました。 そのため、Cloudflareでキャッシュをクリアしましたが、レポートはもう取得されません。
キャッシュをクリアすることが私たちの解決策でした

Cloudflareは使用せず、AWSクラウドフロントCDNを使用し、デプロイするたびに無効になります。 httpsを使用してローカルWebサーバーを実行し、Webサーバーの起動後に最初に実行を試み、その結果としてページをリロードすることで、ローカルでバグを経験しましたが、毎回ではありません。 パターンが見当たりません。 それはたまに起こります。

Cloudflareは使用せず、AWSクラウドフロントCDNを使用し、デプロイするたびに無効になります。 httpsを使用してローカルWebサーバーを実行し、Webサーバーの起動後に最初に実行を試み、その結果としてページをリロードすることで、ローカルでバグを経験しましたが、毎回ではありません。 パターンが見当たりません。 それはたまに起こります。

それが私たちの解決策でした。 キャッシュをクリアすると、1時間あたりのエラーが急速に減少し、少なくともbugsnagで同じエラーが発生することはありませんでした。 これは確かに奇妙なエラーです。

同じエラーメッセージが表示されましたが、InternetExplorerでのみ発生しました。 他のすべてのブラウザは、この種のエラーメッセージを表示しませんでした。

Unhandled promise rejection Error: page resources for / not found. Not rendering React

この問題は、reactコンポーネントで行ったインポートにまでさかのぼりました。 場合によっては、 https：//sap.github.io/ui5-webcomponents/に依存していました。 これらの依存関係を削除すると、問題は解決しました。 本当の根本原因を説明することはできませんが、reactコントロールの依存関係がこの問題を引き起こす可能性があることを指摘したいと思います。

@Chaosbohneはそれについて実際に議論することはできませんが、それはサブ依存関係の問題であるとさえ言えます。 そうすれば、 gatsby.jsチームが依存関係の管理とセキュリティを管理し、最初のステップですべての依存関係/ devDependencyバージョンから^を削除するので、あらゆる問題を防ぐことができます。

この問題はブラウザに依存しないと言えます。 Sentryログに基づいてChromeとSafariで、MacのローカルでChrome 85、86で見ました。

どのソリューションも機能しません。 @KyleAMathewsこの問題により、ビジネスが失われています。3〜4日以内にこの問題が発生し、根本的な原因を

@ R3coNあなたはあなたのウェブサイトを再構築しようとしましたか？ それが私たちに起こったとき、私たちは基本的に再試行しました（それはしばらく前に私はそれが修正された理由を思い出せません）

@ R3coNが役立つ場合は、使用しているパッケージのバージョンが正常に機能しています。

    "gatsby": "2.20.36",
    "gatsby-cli": "^2.12.54",
    "gatsby-image": "^2.4.13",
    "gatsby-plugin-exclude": "^1.0.2",
    "gatsby-plugin-google-analytics": "^2.3.11",
    "gatsby-plugin-manifest": "^2.4.18",
    "gatsby-plugin-offline": "^3.2.17",
    "gatsby-plugin-react-helmet": "^3.3.10",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-resolve-src": "^2.1.0",
    "gatsby-plugin-sass": "^2.3.12",
    "gatsby-plugin-sharp": "^2.6.19",
    "gatsby-plugin-use-query-params": "^1.0.1",
    "gatsby-source-filesystem": "^2.3.19",
    "gatsby-source-graphql": "^2.6.2",
    "gatsby-transformer-sharp": "^2.5.11",

@ shide1989はい、それがそれを修正する唯一の方法です。ウェブサイトを再構築します。 ただし、再構築すると2〜3日間問題が修正され、その後再びこの問題が発生します。 Gatsby CLIバージョン：2.12.67とGatsbyバージョン：2.24.47を使用していますが、gatsbyのバージョン2.20.36は正常に機能しているとおっしゃっていましたが、gatsbyバージョンをダウングレードして運試しをします。

@ shide1989コメントありがとうございます。 しかし、バージョンをダウングレードすると、このエラーがスローされます->

WebpackError：このStaticQueryの結果をフェッチできませんでした。

これは以前のバージョン2.24.47で機能していました。

申し訳ありませんが、useStaticQueryフックを使用してビルド時にクエリを抽出する同じファイルにgraphqlタグ付きテンプレートリテラルがない可能性があります。 （ここで説明されているように：https：//github.com/gatsbyjs/gatsby/issues/24526）

とにかくそれで頑張ってください

しかし、同じコードがgatsby2.24.47で機能していることをお伝えしました。

@ R3coNこの問題は、不適切な静的キャッシュが原因である可能性もあります。 サーバーにnginxまたはs3を使用していて、page-data.jsonを無効にしない場合、データを変更するたびにStaticQueriesが壊れます。

この問題が発生し、すべてのpage-data.jsonをキャッシュしていたことが判明しました。 彼らはすべきではありません。 リクエストごとに再検証する必要があります

https://www.gatsbyjs.com/docs/caching/

@ daydream05コメントありがとうございます。 はい、CloudFrontでS3を使用しています。 Cloudfrontでこれを実現する方法を知っていますか？

@ daydream05すでにcache-control： 'public、max-age = 0、must-revalidate'がpage-data.jsonとapp-data.jsonに追加されています。これは、これらのページがキャッシュされないことを意味します。

これは、存在しないページ（404ページをロードしてハイドレイトする必要があります）でも見られます。

ローカルでは、開発ビルドと本番ビルドはこのエラーなしで機能します。チェック中にconsole.logを挿入すると、ビルドされた本番app-[hash].jsでそのエラーがスローされ、 pageことがわかります。 page.componentChunkName: ""component---src-pages-404-js"れています。

ただし、アプリがgatsbyクラウドにデプロイされると、存在しないページが読み込まれるたびにエラーが発生します。 SSRされた404ページがブラウザに表示されますが、エラーがスローされるため、Reactがブラウザで実行されることはありません。 404ページが（ /404パスにアクセスして）直接読み込まれると、エラーなしで正常に機能します。

これまでローカルで複製できなかったため、これを診断するのは困難です。

最新バージョンの使用： "gatsby": "^2.24.91"

これをここに投稿するだけで、他の人がreact-mdを使用してサイトをすばやく修正できるようにするか、ギャツビーでこの問題を修正するのに役立つことを願っています。

react-mdを使用していたプロジェクトの1つで同じエラーが発生しました
すべてのコンポーネントを削除した後、私は問題を取り除くことができました。

これをテストするために毎回prodにデプロイする必要があったため、この問題が発生している特定のコンポーネントを特定することはできませんでしたが、絞り込みました。

import Card from "react-md/lib/Cards/Card";
import CardTitle from "react-md/lib/Cards/CardTitle";
import CardText from "react-md/lib/Cards/CardText";
import CardActions from "react-md/lib/Cards/CardActions";
import { TextField, Button, Snackbar } from "react-md";

もっと深く掘り下げる時間があれば、この問題に関するブログ投稿を更新します。

404ページに関しては、同じパターンの動作が発生しているため、 @ aMonikerの問題を確認できます。

ローカルでは、開発ビルドと本番ビルドの両方が404ページで正常に機能しますが、Gatsby Cloudにデプロイすると、実際の/404パスを除くすべての不明なページで問題が発生します。

また、このエラーが発生し、ブラウザのキャッシュをクリアすることで修正しました。 ただし、すべての用途にこれを強制することはできないため、それを必要としないソリューションを見つけることをお勧めします。

@ dejavu1987この問題が発生しているプロジェクトでは、react-mdを使用していません。

@MaciekBaronブラウザのキャッシュを複数回クリアし、クリアするたびにページをリロードすることで、ローカルでエラーを再現しました。

先に述べたように、これはキャッシュの問題のようです。 キャッシュヘッダーがすべて適切に設定されている場合、問題はサービスワーカーにある可能性があります。

たぶん、このプラグインを試してみませんか？
https://www.npmjs.com/package/gatsby-plugin-remove-serviceworker

ねえ、私もこの問題に遭遇します。 開発ではすべてが正常に機能していますが、gatsby buildを実行してパブリックディレクトリをウェブホスティングサービスにデプロイすると、このエラーメッセージが原因でページが機能しなくなります。

私は非常に興味があり、パブリックページデータディレクトリを調べました。 特定のページディレクトリが存在することがわかりましたが、小文字ではなく、ディレクトリが大文字でした。 それがエラーメッセージが表示された問題でした。

その後、最初は小さな文字に変更し、prodで正常に動作しました。 これは、以前にページの名前を変更したために発生したと思います。おそらくここに何かがキャッシュされていますか？

私もこの問題に遭遇します。 この問題を解決する方法を見つけました。 しかし、それは本当の問題を解決していないと思います。

それでは、修正方法を説明しましょう。

この問題は、テスト環境または実稼働環境で見つかりました。上記のすべてのように、開発では再現されません。 テストや本番環境でも、毎回発生するわけではありませんでした。 そして、すべてのスクリプトがプリロードされ、非同期で実行されていることがわかりました。 したがって、スクリプトの大統領命令が原因である可能性があります。

3G fastに設定するなど、ネットワークのネットワークの速度を落とすと、ほとんど毎回問題が発生しました。 これは私の推測を裏付けました。

私の推測を検証するために、次のように、 gatsby-ssr.js HTMLをレンダリングするプロセスを変更して、すべてのスクリプトを「非同期」なしで設定しました。

exports.onPreRenderHTML = ({ replacePostBodyComponents, getPostBodyComponents }) => {
    const postBodyComponents = getPostBodyComponents()
    postBodyComponents.forEach((component) => {
      if(component.type === 'script' && component.props) {
        delete component.props.async
      }
    })
    replacePostBodyComponents(postBodyComponents)
  }

幸いなことに、それは機能します。

この方法で問題を解決することはできますが、これを行うには良い方法ではないと思います。 ギャツビーの機能に違反しているようです。 スクリプトは非同期で実行されるように設計されていますか？

うまくいけば、この方法ですべての問題も解決できます。

この問題は、テスト環境または実稼働環境で見つかりました。上記のすべてのように、開発では再現されません。 テストや本番環境でも、毎回発生するわけではありませんでした。 そして、すべてのスクリプトがプリロードされ、非同期で実行されていることがわかりました。 したがって、スクリプトの大統領命令が原因である可能性があります。

この方法で問題を解決することはできますが、これを行うには良い方法ではないと思います。 ギャツビーの機能に違反しているようです。 スクリプトは非同期で実行されるように設計されていますか？

私はあなたが正しいと思います、私は奇妙な理由でこの問題が戻ってきました。
最新のものはワイルドでしたが、私がそれをあなたの答えに結び付けるとき、それは理にかなっています。

そこで、最近、レイアウトコンポーネントにフォントアイコンコンポーネントを追加しましたが、この問題が再現されました。
注意すべき重要な点は、フォントアイコンは他の深いネストされたコンポーネントで常に使用されており、ページコンポーネントから呼び出される最初のコンポーネントであるレイアウトレベルにある場合にのみ、問題が発生することはありませんでした。

私は間違っているかもしれませんが、これは実際の原因を理解するための良いシナリオかもしれません。

@ dejavu1987あなたに同意します。 たぶん、あなたは実際の原因を理解するための良いシナリオを与えました。

さらに、webpackはコードを異なるチャンクに分割しますが、チャンクには依存関係がある可能性があるため、 async使用してスクリプトをロードして実行するのが適切かどうか疑問に思います。

主な問題は、ギャツビーがページの読み込み中にエラーを飲み込み、非常に一般的なpage resources for / not found. Not rendering Reactメッセージを報告することであるようです。そのため、このスレッドではさまざまな潜在的な原因が報告されています。

私の問題は、Mobx 5がIE11をサポートしていないことでした。Mobxはこれに対して優れたエラーメッセージを提供しますが、Gatsbyからの「ページリソースが見つかりません」というメッセージだけが表示され、誤解を招く恐れがありました。

この問題の解決策として、ページの読み込みに失敗する原因となった元のエラーメッセージを報告することをお勧めします。 @wardpeet

私にとってそれを修正したのは、404ページで200を返すようにS3を設定したことです。 404ステータスコードを返すように変更すると、機能しました。

はい、私もこれを見つけました。 しかし、私の問題はもっと広範でした…Cloudfront404の結果を不適切にキャッシュしていました。 CloudfrontとS3の間で404の結果が得られた理由は、CodePipelineを介したS3へのデプロイが、Build Artifact ZIPファイルを解凍すると信じているためですが、特定の順序では実行されません。 したがって、数分間、まだ存在しない新しい.JSファイル（新しいハッシュを含む）を指す新しい.HTMLファイルを作成できます。 ハッシュされたアセットファイルのキャッシュを処理するものは、CDNキャッシュをフラッシュすることによってのみ修正できるため、404結果をキャッシュしてはなりません。

ちなみに、HTMLファイルが最後にS3にデプロイされていることを確認する方法を誰かが理解しましたか？

ダビデ
https://ewebinar.com

2020年10月21日には、12:40で、ビンス・P.の[email protected]は書きました：

@ R3coN https://github.com/R3coNこの問題は、不適切な静的キャッシュが原因である可能性もあります。 サーバーにnginxまたはs3を使用していて、page-data.jsonを無効にしない場合、データを変更するたびにStaticQueriesが壊れます。

この問題が発生し、すべてのpage-data.jsonをキャッシュしていたことが判明しました。 彼らはすべきではありません。 リクエストごとに再検証する必要があります

https://www.gatsbyjs.com/docs/caching/ https://www.gatsbyjs.com/docs/caching/
—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信するか、GitHub https://github.com/gatsbyjs/gatsby/issues/19618#issuecomment-713298516で表示するか、 ください。

PWAテストの有無にかかわらず、モバイルテストでchrome LighthouseAuditの問題を再現したことを付け加えます。 モバイルテストではネットワークとCPUの制限が使用されていると確信しているため、非同期スクリプトの読み込みが順不同であるか、30個のうちの1つが失敗する可能性があります。

私は3Dを使用していますが、 localhostでwebpackとgatsby.jsいる場合でも、ページをリロードすると、静的モデルgtlfネットワークリクエストが失敗することがよくあります。ファイル。 それらの1つが失敗しました-すべてのアプリが壊れています（ErrorBoundaryが設定されていない場合）。

ここでも同じパターンである可能性がありますが、適切なエラー処理はありません。

本番環境ではS3とCloudFrontを使用しています。 同様の問題が発生しましたが、私の場合、CloudfrontのコンソールでのみCan't render Reactエラーが発生していました。 これは、本番S3でファイルを変更した後に発生し始めました。 驚いたことに、灯台を生産元に再稼働させた後、問題は解決しました。

これは、通常モードのデバイスでのみ発生していました。 私の場合、キャッシュ全体をクリーンアップすると、Cookie、localstorage、セッションストレージ、およびサービスワーカーは以前は役に立ちませんでした。

したがって、灯台で生産元をプロファイルし、ファイルが変更された場合、この問題も発生する可能性があります（私の場合は）

私のポイントは、灯台でそれを10からほぼ1で再現できるということです。最後の展開は、かなり前のことです。

これは誰にでも起こっているのですが、理由は違うので、ギャツビーがこの問題を解決できるとは思いません。 空白のページが頻繁に表示されるか、バックエンドのgatsbyページで何かを変更すると、空白になってエラーがスローされます。そのエラーも毎回異なります。 gatsbyの使用をやめて、他の信頼できるフレームワークに切り替える必要があると思います。

再現する方法があればエラーを修正できますが、ありません。 このエラーはランダムに発生します。展開の1日後に発生することもあれば、展開の3〜4日後に発生することもあります。 しかし、それは起こります。

@antoinerousseau何か見つけましたか？ 誰かが少なくともこの問題をデバッグする方法を段階的に教えてもらえますか？ 私は自分の側からすべてのことを試しましたが、ウェブサイトを展開してから1〜2日後に中断します。 私にとってはランダムに発生するため、この問題がいつ発生するかを知る方法を誰かに教えてもらえますか？

私にとってそれを修正したのは、404ページで200を返すようにS3を設定したことです。 404ステータスコードを返すように変更すると、機能しました。

S3またはCloudfront？

私の場合、問題は404ページにあり、Azureによってデフォルトで使用されていました。 それはブロッキングエラーでした、そして私がコンソールで見ることができた唯一のものは
Error / page resources for / not found. Not rendering React

カスタム404を使い始めてから、問題はなくなりました。

Netlifyにアプリをデプロイしても同じようになります。ローカルではGatsyBuildとGatsbyServeがうまく機能します。これはさらに奇妙です。

@atapas Netlifyサポートに連絡できますか？ 彼らは彼らの側から何かを明らかにすることができるでしょうか？

@atapas Netlifyサポートに連絡できますか？ 彼らは彼らの側から何かを明らかにすることができるでしょうか？

はい、しました。 ありがとう！

たぶん、より良いスタックトレースまたは明確なエラーメッセージがここで役立つでしょう。 とにかく、応答をありがとう。

@atapas私はチームのメンバーではなく、あなたと同じバグに苦しんでいます。

Netlifyにアプリをデプロイしても同じようになります。ローカルではGatsyBuildとGatsbyServeがうまく機能します。これはさらに奇妙です。

私は完全に異なる文脈で解決策を見つけました。 NetlifyがAuth0がアプリで機能するように設定した環境変数を無視していたため、エラーが発生していました。

ドメイン：process.env.AUTH0_DOMAIN、
clientID：process.env.AUTH0_CLIENTID、
redirectUri：process.env.AUTH0_CALLBACK、

後でここから「機密変数を使用しないデプロイ」について読み、ドキュメントに記載されているとおりに修正しました。

私が得たエラーに驚いて、解決策が着陸しました..しかしそれがうまくいったことをうれしく思います。

@atapas私はチームのメンバーではなく、あなたと同じバグに苦しんでいます。

@ JustFly1984 、本当にありがとうございました。 私はNetlifyのドキュメントを調べて、上記のコメントで述べたように解決策を見つけることができました。

これはChromeでのみ取得できます。 Safariはうまく機能します。 オフラインプラグインとマニフェストプラグインをプロジェクトに追加しました。 Gatsby developまたはgatsby buildとgatsby serveでローカルに複製することはできません。 私はNetlifyでホストしています。

私にとって、Reactコンポーネントの外部にあるこのコードのブロックと、Reactコンポーネントのグローバル変数を参照すると、エラーが発生していました。 それを削除すると、問題が修正されました。

let deferredprompt = null;
let updateAvailable = false;
if (
  typeof window !== "undefined" &&
  window.hasOwnProperty("BeforeInstallPromptEvent")
) {
  window.addEventListener("beforeinstallprompt", (event) => {
    deferredprompt = event;
    event.preventDefault();
  });
}

if (typeof window !== "undefined" && window.isUpdateAvailable) {
  window.isUpdateAvailable.then(
    (isAvailable) => (updateAvailable = isAvailable)
  );
}