Gatsby: 错误/页面资源为/找不到。 不渲染React

iya！

这个问题已经悄无声息。 幽灵般的安静。 👻

我们遇到了很多问题，因此我们目前在闲置30天后就关闭了问题。 从这里的最新更新已经至少有20天了。
如果我们错过了此问题，或者您想使其保持打开状态，请在此处回复。 您也可以添加标签“ not stale”以保持此问题的状态！
谨在此提醒您：解决此问题或其他任何问题的最佳方法是打开请求请求。 请查看gatsby.dev/contribute ，以获取有关打开PR，分类问题和提供帮助的更多信息！

感谢您加入盖茨比社区！ 💪💜

如果我们提供更好的stacktrace， @ antoinerousseau会有所帮助吗？ 可能是404，或者页面数据无效。 目前，您并没有真正看到差异。

您认为前进的最佳方式是什么？ 您是否自己在移动Safari浏览器中尝试过？

@wardpeet感谢您对此进行调查。
我尝试使用Safari桌面，但无法复制。 我没有iPhone。
我不确定该如何进行，因为它仅偶尔偶尔发生，但是更好的堆栈跟踪无论如何都不会受到伤害。
请注意，使用85％的Mobile Safari，10％的Safari和5％的Chrome Mobile iOS只能发生124次。 各种版本。
此外，URL并不总是/ 。 如果需要，我可以给您访问Bugsnag帐户的权限。

我今天有相同的错误报告。 只是让您知道您并不孤单。

iya！

这个问题已经悄无声息。 幽灵般的安静。 👻

我们遇到了很多问题，因此我们目前在闲置30天后就关闭了问题。 从这里的最新更新已经至少有20天了。
如果我们错过了此问题，或者您想使其保持打开状态，请在此处回复。 您也可以添加标签“ not stale”以保持此问题的状态！
谨在此提醒您：解决此问题或其他任何问题的最佳方法是打开请求请求。 请查看gatsby.dev/contribute ，以获取有关打开PR，分类问题和提供帮助的更多信息！

感谢您加入盖茨比社区！ 💪💜

又见面了！

在此问题上发生任何事情已有30天了，因此我们友好的邻居机器人（就是我！）将关闭它。
请记住，我只是一个机器人，所以如果我错误地解决了这个问题，我就是HUMAN_EMOTION_SORRY 。 如果您还有其他需要，请随时重新打开此问题或创建一个新问题。
谨在此提醒您：解决此问题或其他任何问题的最佳方法是打开请求请求。 请查看gatsby.dev/contribute ，以获取有关打开PR，分类问题和提供帮助的更多信息！

再次感谢您加入盖茨比社区！ 💪💜

看到同一件事。

• 它经常出现（我们每天都在看）。
• 几乎所有的Mobile Safari或Safari。
• 几乎总是/ ，但很少有其他页面。
• Sentry具有与Bugsnag相同的堆栈跟踪，并具有以下面包屑：
  

同样在这里。 对于/ index以外的页面。

设备
品牌介绍了华为
家庭| DRA-LX5

操作系统
姓名| 安卓系统
版本| 8.1.0

浏览器
名称| Chrome移动版WebView
版本| 70.0.3538

开发包
姓名| sentry.javascript.browser
版本| 5.12.1

iya！

这个问题已经悄无声息。 幽灵般的安静。 👻

我们遇到了很多问题，因此我们目前在闲置30天后就关闭了问题。 从这里的最新更新已经至少有20天了。
如果我们错过了此问题，或者您想使其保持打开状态，请在此处回复。 您也可以添加标签“ not stale”以保持此问题的状态！
谨在此提醒您：解决此问题或其他任何问题的最佳方法是打开请求请求。 请查看gatsby.dev/contribute ，以获取有关打开PR，分类问题和提供帮助的更多信息！

感谢您加入盖茨比社区！ 💪💜

仍然是一个问题。

我也遇到这个问题。 gatsby develop可以正常工作，但是gatsby build会导致应用程序中断，并显示“错误：找不到/的页面资源。未呈现React。” 在运行时，即使构建本身成功。

这可能是由于我使用Typescript造成的吗？

我尝试运行gatsby clean

更新/可能的解决方案：对我来说，引起此错误是因为我只有一个“ .env.development”文件，而没有一个“ .env.production”文件。 我不知道为什么这会给这样一个模棱两可/令人困惑的错误，并阻止React渲染。 我觉得预期的行为与运行gatsby develop时的行为相同。 当我运行gatsby develop并且没有.env.development文件时，React仍会渲染，但是我的应用程序崩溃，因为它缺少重要的值。

我有同样的问题。 我的应用托管在AWS上并使用Cloudfront。 我有一项政策，将所有不存在的网址重定向到状态为200的404.html页面。 这看起来很奇怪，但这对于我们的功能之一真的很重要。 因此，如果我键入类似my-test-site.com/some-not-existed-page window.pagePath则将是/404.html ，这是正确的，但是publicLoader.loadPage为什么试图不加载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
};

这与MacOS catelina和Chrome版本80.0.3987.149一起使用。
"gatsby": "^2.20.13",

需要注意的重要一点是，我正在使用expo gatsby变体。

运行干净的gatsby build时我也遇到了这个问题，根本原因是我的package.json中有一个acorn程序包漏洞的解决方案（请参阅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次）：

Mobile Safari上的Stacktrace：

.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上的Stacktrace：

/app-ac76ae7860adc4ef4414.js:1:179819

面包屑：

时间| 类型错误资讯
-| -| -| -
前4毫秒| 要求| XMLHttpRequest错误| GET /page-data/app-data.json
前5毫秒| 要求| XMLHttpRequest错误| GET /page-data/index/page-data.json
前6毫秒| 要求| XMLHttpRequest错误| GET /page-data/app-data.json
前7毫秒| 要求| XMLHttpRequest错误| GET /page-data/index/page-data.json
前10毫秒| 要求| XMLHttpRequest错误| GET /page-data/app-data.json
前10毫秒| 要求| XMLHttpRequest错误| GET /page-data/index/page-data.json

其中大多数发生在Mobile Safari和Chrome Mobile上：

盖茨比版本：2.20.13

检查此解决方案。
https://github.com/gatsbyjs/gatsby/issues/11461#issuecomment -459732145

我不使用gatsby-plugin-offline所以没有服务人员。

有没有任何进展？ 我遇到问题，并且插件已脱机，并且无法禁用该插件以测试错误是否消失。

我认为这与离线插件无关。 我们看到许多此类错误，并且从未使用过。

复制：

• 转到[不再需要示例，请参阅下文]，注意控制台和非功能性React中的错误。
• 导航到左上方带有徽标的主页。
• 单击标题中的“研究”，导航回到原始页面。 Page现在可以工作并且面板可以折叠。

我该如何调试？ 没有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版本（仅两天前发布），修复了Safari的错误

升级到最新的盖茨比版本。 问题仍然存在

我以前从未经历过。 突然，每次都会发生。 仅在生产中😢
这是在20个小时前进行更新后发生的。 我们非常定期地更新依赖关系。
因此，基本上该项目已关闭，我不知道如何使它重新工作。

我尝试将更新还原到20小时前的状态。 没有帮助。
恢复到8天前也没有帮助。

这是具有最新更新的项目： https :
这是8天前的最后一个工作： https :

将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)

更新：该错误仍在gatsby v2.21.19中发生

@barbalex您可以与我们分享您的网站吗？ 如果是私人的，请发送电子邮件至[email protected]。

调试时在您的网站上出现此错误

[].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/的生产环境中看到了这一点

对于最近已删除的一页也遇到了同样的问题。 https://intergiro.com/legal并未显示预期的自定义404页面（台式机Chrome，Gatsby 2.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指令regex在不应该匹配时也与/page-data/items/page-data.json相匹配。 在正则表达式的开头添加^可以避免意外的匹配。

我们在https://www.voteamerica.com/的生产环境中看到了这一点

也面临着同样的问题。

嗨，盖茨比队，大家好。 是否可以指定loadPage返回的错误，该错误似乎是此问题中出现的各种错误的来源？

引用功能： https :

据我了解，此功能尝试先加载app-data.json ， page-data.json然后再加载JS组件本身，因此非常容易出现网络问题，服务器配置问题，开发问题，配置问题...通过指定错误消息，可以更轻松地解决潜在问题。

（供参考：此问题在我们网站上的最后一次出现是由于循环导入）

我再次尝试使用v2.23.12。 结果相同： https :

对我们来说，似乎每个版本都高于2.20.36，这绝对是系统的。 使用gatsby构建的五个应用程序中的每个。 因此，此后我们一直被禁止更新。

这开始成为一个问题。 例如，我们被禁止在v3（https://github.com/gatsbyjs/gatsby/issues/15601）中使用core-js使用任何库。 该问题现已解决-如果我们可以升级。

如果有什么办法可以帮助我进行信息/测试/其他方面的工作，我很乐意提供。

@barbalex您的应用程序中存在以下错误：

我们绝对应该显示此错误。 随时添加PR，我没有足够的带宽来执行此atm。

在我们的情况下，似乎此问题是由在服务器端使用该库时的react-contextmenu引起的： https :

@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不，我没有找到解决方案。 等待盖茨比团队在图书馆级别解决此问题。

我仍然不太确定问题出在哪里，我很乐意为此做一个公关，但想知道是否找到根本问题在哪里？

大家好，我在使用IE11进行生产时遇到了这个问题。

“盖茨比”：“ ^ 2.23.11”

IE11上的所有页面也都面临空白（无水合）结果。
找不到/的页面资源。 不渲染反应

盖茨比v2.24.2

编辑：我还原到以前的功能版本v2.22.11。 ie11在该提交中正常工作，因此现在也可以正常工作，尽管仅当我保留package-lock.json和npm ci时。 不知何故，我不认为这是错误的盖茨比，所以我列出了一些可能与之相关的下游变化：
（工作版本->构建版本失败）
可能仅是ie11失败的候选对象的大对象：
@ babel /核心7.10.0-> 7.10.5
@ core / js 2.6.11-> 3.6.5
gatsby-legacy-polyfills新版0.0.2

其他可能性较小：
@ graphql-tools / schema新版6.0.14
@ graphql-tools / utils新的Dep 6.0.14
然后我耐心地筛选了vscode diff工具中的所有红色->所有绿色

其他注意事项：我用gatsby build && gatsby serve -H 0.0.0.0重现了该错误，因此排除了服务器环境方面的所有问题。

编辑2：我的帖子中首先报告的fauly v2.24.2构建的构建输出从10mb变为30mb。 它具有约20个版本的app- {hash} .js，2个Commons- {hash} .js和各种数量的pages.js。 似乎文件不完全相同，并且它们的日期与以前的版本相匹配。 因此，好像gatsby build某种程度上已经掌握了所有可用的旧版本，并将其丢入/ public。

任何人都可以共享存储库吗？

@roffelsaurus您可以尝试2.23.22吗？
对我们来说2.24.2在ci / cd赛普拉斯测试中失败。

任何人都可以共享存储库吗？

我们可以私下共享我们的repo和var，如果可以的话，请在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 ），并为其分配导入。 进入它并观察它的依赖关系，因为其中之一将失败。 我相信每种情况都会有所不同，所以这就是为什么在任何地方都找不到一个好的解决方案的原因。 源地图派上用场，因为它们向我展示的不仅仅是数组中的一系列通用承诺。

这不是主题的核心，但是我将在下面保留我发现的细节。 不过请记住，以下内容仅适用于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）有一种特殊的方式来处理带斜杠的网址路径。 我不知道这能帮上忙

我也有这个问题。

我无法共享存储库，但是如果您访问此页面，则可以看到它正确加载了SVG。 但是，如果我走到一条不存在的路由，例如https://rocketseat.com.br/test，它会显示代码的过时版本（仍使用gatsby-image而不是SVG）并显示在控制台上向我显示此消息：

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

我正在使用[email protected]

_edit：我不知道为什么，但是在这里添加问题之后，图像问题就解决了，但是在console_页面上我仍然遇到相同的错误

我很难复制，在哨兵错误报告中我只看到大量此类错误

@theskillwithin-相同。 哨兵中有成千上万的人。

我有同样的问题。 很奇怪。 似乎有多种原因触发此错误。

我们还看到这种错误发生在各种浏览器和各种页面上。 我似乎无法将我们的情况与上述任何可能的原因联系起来。 而且，我似乎无法在开发中进行复制-它仅发生在我们已部署的网站上。

我有同样的问题。 无法复制，但是大量的错误出现在哨兵身上。 还有各种浏览器
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％的时间内失败。 也许模块中正在使用某种与加载该模块的设备/浏览器不兼容的东西。 确切地说，这很难说，因为具体错误已被掩盖。

我认为我们需要的是_not_吃掉所生成错误的组件加载器。

当asyncRequires中不存在块时，在其中拥有Promise.resolve() asyncRequires意味着抛出错误是有意义的。 每次访问该页面时也会抛出该错误……因此很容易找出原因。

在catch块中返回null意味着抛出的错误没有意义。 找到了模块，但是在动态导入期间发生了错误。 webpack不会在动态导入的catch()块中返回错误吗？ 如果没有，那么也许这是Webpack应该解决的问题。 我知道，如果我从devtools运行了错误的import() ，则会报告一个错误...是否基于无法/无法解析导入的javascript报告了错误，这是另一个问题，并且需要某些代码我进行了一些额外的测试，但我无法在某些浏览器中使用它们。

@wardpeet你提到的更好的错误报告之前。 是在工作中，还是需要帮助？

关于浏览器兼容性，我看到这些错误主要是由移动设备产生的。

但是我也看到了在使用Safari的MacOS X和使用Chrome的Windows 10上生成的这些错误。

一种普遍性是，流量通常似乎来自Facebook或Google。 但这可能只是巧合，因为这些因素驱动了我们的大部分流量。

_注意：我正在使用的该站点实际上正在使用[email protected] ，因此我链接到的代码位于不同的位置，但是逻辑本身似乎并未更改。 它仍在做同样的事情，而且我确定的潜在故障点似乎是相同的。

[email protected]

我也很少在bugsnag上看到该错误。 不清楚页面是否正在呈现给我。 如果有任何帮助@wardpeet ，请参见bugsnag上的堆栈。 请注意，这是我们在其上使用createPage（）的许多/ webinar / blah ...页面之一，但是，当然，如果我尝试获取/ page-data / ...，如照片所示，对我有用。

我会在记录的错误中添加一些额外的信息，因此希望我们能够找到问题

我在页面上遇到了同样的问题，该页面产生了另一个错误，发布于https://github.com/gatsbyjs/gatsby/issues/26706

就我而言，它发生在（至少）桌面chrome中，并且仅在我第一次加载页面时发生，如果我点击了刷新，那么一切都会按预期呈现

然后，如果我尝试第一次复制，即使使用incognito模式并尝试擦除我能想到的每个缓存，我也无法（有时我已经能够，但是非常随机），直到一段时间之后（几天）我访问了该网址，并找到了相同的错误（再次刷新后消失了）

如果我尝试使用与上述链接问题相同的最小存储库来复制它，那么我将看不到相同的错误（至少不是我现在尝试过的时间）

由于未创建砌体网格，因此错误（在这种情况下）可见，在我的情况下，除非用户考虑刷新页面（我怀疑他们没有这样做），否则该页面会破坏页面

其实感觉是如此随意，以至于我已经看到了几个星期，但我一直认为这与我的电脑有关

我运行了npm auidit fix ，问题已为我解决。

以下！ 也有同样的问题

嗨，您好，

我们也仅在生产中遇到此问题。 我们会在特定网址中100％地重现此错误。 让我们看一下public dir的树结构：

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

当我们输入这些网址https://domain.com/usages/brainstorming它可以正常工作， https://domain.com/usages/seminaries也可以。 如果我们输入一个未知的网址，例如https://domain.com/doesnotexist我们应该有404页，但是如果我们尝试找到一个与树中的实际文件夹匹配的网址，例如https://domain.com/usages ，那么我们会有这个空白页和这个错误。

那会打铃吗？

最好

@guillaumepotier您还会碰巧使用nginx吗？

我认为这可能是由错误的响应头引起的。

@ daydream05是的，的确，我们正在使用nginx。 我们在日志中看到了304个未修改的内容标头，有时还有200个响应。

使用AWS S3存储桶

同样，在AWS S3（带有CloudFront CDN）中托管。

我运行了npm audit fix ，问题已为我解决。

有趣的@ liuuuk311。 我在我们的项目上尝试过它，也许它也为我们解决了这个问题。 时间会证明一切，但是到目前为止，在48小时之后，我们的日志中没有发生任何事件。

编辑：5天后，仍然没有发生...

编辑：10天后，它又发生了几次，很抱歉报告。 本身运行npm audit fix似乎无法解决问题。

@wardpeet一些额外的bugsnag数据可能有助于诊断...

根据这些，看来page-data.json文件实际上正在正确加载...

• 由于我今天碰到了这个问题，所以我会碰碰*并在这里观看。

就我而言，我修复了将polyfill.io lib加载到页面中的问题

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

@pedrofsantoscom请解释静态加载的脚本如何解决gatsby.js的问题？

昨天有同样的问题。 清除缓存在本地为当前用户修复。 因此，我们清除了Cloudflare的缓存，现在不再有任何报告。
清除缓存是我们的解决方案

我们不使用Cloudflare，而是使用AWS cloudfront CDN，并且每次部署后它都会失效。 我通过在本地服务器上运行https并第一次尝试在Web服务器启动后运行以及在随后的某些页面重新加载中（但不是每次都运行）来在本地遇到该错误。 我没有看到任何模式。 它只是偶尔发生一次。

我们不使用Cloudflare，而是使用AWS cloudfront CDN，并且每次部署后它都会失效。 我通过在本地服务器上运行https并第一次尝试在Web服务器启动后运行以及在随后的某些页面重新加载中（但不是每次都运行）来在本地遇到该错误。 我没有看到任何模式。 它只是偶尔发生一次。

那是我们的解决方案。 当我们清除缓存后，每小时的错误会迅速减少，并且至少在bugsnag中没有得到相同的错误。 这确实是一个奇怪的错误。

我有相同的错误消息，但仅在Internet Explorer中。 其他所有浏览器均未显示此类错误消息。

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

我将问题归结为我在React组件中进行的导入。 在某些情况下，我依赖于https://sap.github.io/ui5-webcomponents/ 。 一旦我删除了这些依赖关系，问题就消失了。 我无法解释真正的根本原因是什么，但想指出您的反应控件中的依赖关系可能导致此问题。

@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）

无论如何，祝你好运

但是我告诉你，相同的代码也适用于gatsby 2.24.47。

@ R3coN此问题也可能是由于不正确的静态缓存引起的。 如果您在服务器上使用nginx或s3，并且没有使page-data.json无效，则每当更改数据时，StaticQueries都会中断。

我遇到了这个问题，事实证明我正在缓存所有page-data.json。 他们不应该这样。 每个请求都必须重新验证它们

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

@ daydream05感谢您的评论。 是的，我正在将S3与CloudFront一起使用。 您是否知道如何使用Cloudfront实现这一目标？

@ daydream05我已经具有缓存控制：'public，max-age = 0，必须重新验证'添加到page-data.json和app-data.json中，这意味着这些页面没有被缓存。

我在不存在的页面上也看到了这一点（应该加载并填充404页面）。

在本地，我的开发和生产构建可以正常工作而不会出现此错误，并且当我在检查期间插入console.log在生成的生产app-[hash].js引发该错误时，我可以看到page对象存在，并且包含page.componentChunkName: ""component---src-pages-404-js"正如我期望的那样。

但是，将应用程序部署到gatsby cloud时，每次不存在的页面加载都会发生错误。 SSR的404页面显示在浏览器中，但是随后引发错误，因此React从未在浏览器中运行。 当直接加载404页面时（通过访问/404路径），它可以正常工作，没有错误。

这很难诊断，因为到目前为止我还不能在本地复制它。

使用最新版本： "gatsby": "^2.24.91"

只需在此处发布此内容，让其他人使用react-md快速修复他们的网站，或者希望这可以在反正Gatsby中解决此问题。

我在其中一个项目中使用react-md遇到了相同的错误
删除所有组件后，我可以摆脱这个问题。

由于我每次都必须部署产品进行测试，因此我没有设法确定哪个特定组件存在此问题，但我将其范围缩小了。

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并将公用目录部署到我的网络托管服务商时，由于该错误消息，页面无法正常工作。

我很好奇，并查看了公共page-data目录。 我发现特定的页面目录存在，但不是小写字母，而是大写字母。 那是我收到错误消息的问题。

之后，我一开始将其更改为小写字母，并在产品中正常工作。 我认为发生这种情况是因为我更早更改了页面的名称，也许这里缓存了某些内容？

我也遇到这个问题。 我找到了解决此问题的方法。 但是我认为这还没有解决真正的问题。

现在，让我解释一下如何修复它。

如上所述，这个问题是在测试或生产环境中发现的，不会在开发中重现。 即使在测试或生产中，也并非每次都发生。 而且我发现所有脚本都是异步预加载和执行的。 因此，我想这可能是由脚本的执行顺序引起的。

当我放慢网络中的网络（例如设置为3G fast ，问题几乎每次都发生。 这证实了我的猜测。

为了验证我的猜测，我更改了gatsby-ssr.js中呈现HTML的过程，将所有脚本都设置为不带“ async” ，如下所示：

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

令人高兴的是，它有效。

即使这种方法可以帮助解决问题，但我认为这不是一个好方法。 似乎违反了盖茨比的功能。 脚本是这样异步执行的吗？

希望这种方式也可以解决您所有的问题。

如上所述，这个问题是在测试或生产环境中发现的，不会在开发中重现。 即使在测试或生产中，也并非每次都发生。 而且我发现所有脚本都是异步预加载和执行的。 因此，我想这可能是由脚本的执行顺序引起的。

即使这种方法可以帮助解决问题，但我认为这不是一个好方法。 似乎违反了盖茨比的功能。 脚本是这样异步执行的吗？

我认为您是对的，由于一些奇怪的原因，我再次遇到了这个问题。
最新的一个很疯狂，但是当我将它连接到您的答案时，这很有意义。

因此，最近，我在布局组件中添加了字体图标组件，并重现了此问题。
需要注意的重要一点是，字体图标一直在其他深层嵌套组件中使用，并且只有在布局级别（这是从任何页面组件调用的第一个组件）时，才不会引起问题。

我可能是错的，但这可能是找出实际原因的好方案。

@ dejavu1987与您同意。 也许您已经给出了一个很好的方案来找出实际原因。

此外，我想知道是否适合使用async加载和执行脚本，因为webpack将代码分为不同的块，但这些块可能具有依赖性。

主要问题似乎是盖茨比（Gatsby）在页面加载期间吞下了错误，并且只报告了非常普通的page resources for / not found. Not rendering React消息，这就是为什么在此线程中报告了许多不同的潜在原因的原因。

我的问题原来是Mobx 5不支持IE11，尽管Mobx为此提供了一个不错的错误消息，但我得到的只是Gatsby的“找不到页面资源”消息，这具有误导性。

我谨以此建议解决此问题，以报告导致页面加载失败的原始错误消息。 @wardpeet

对我来说解决的是，我设置了S3以在404页上返回200。 当我将其更改为返回404状态代码时，它可以正常工作。

是的，我也发现了这一点。 但是，我的问题范围更大……我在Cloudfront 404结果上缓存不当。 我在Cloudfront和S3之间获得404结果的原因是，我相信通过CodePipeline部署到S3会解压缩Build Artifact ZIP文件-但它不会以任何特定的顺序执行。 因此，几分钟后，您可以拥有一个新的.HTML文件，这些文件指向尚不存在的新.JS文件（带有新哈希）。 无论处理缓存的资产文件的缓存是什么，都不能缓存404结果，因为只能通过刷新CDN缓存来更正此错误。

有没有人想过如何确保将HTML文件最后部署到S3？

大卫
https://ewebinar.com

在2020年10月21日，在12:40 PM，文斯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上查看或取消订阅https://github.com/notifications/unsubscribe-auth/AA3SHT55MXZTXQUAXH5ZUY3SLZQ4VANCNFSM4JPB5IKQ 。

我可以补充一点，我已经在移动测试（无论是否使用PWA测试）中重现了chrome Lighthouse Audit的问题。 我确定移动测试使用网络和cpu限制，因此异步脚本加载不正常，或者30个失败之一...可能经常是这种情况。

我正在使用3d，甚至在localhost和webpack和gatsby.js ，重新加载页面也经常导致对静态模型gtlf网络请求失败文件。 其中之一已失败-所有应用程序均已损坏（如果未设置ErrorBoundary）。

我猜这里可能是相同的模式，但是没有适当的错误处理。

我正在使用S3和CloudFront进行生产。 我遇到了类似的问题，但就我而言，我仅在Cloudfront的控制台中遇到Can't render React错误。 更改生产S3上的文件后，这种情况开始发生。 令我惊讶的是，在重新生产灯塔后，问题得以解决。

这仅在正常模式下在我的设备上发生。 就我而言，清理整个缓存，Cookie，本地存储，会话存储和服务人员并没有帮助。

因此，如果您使用灯塔描述了您的生产来源并更改了文件，则也可能会出现此问题（以我为例）

我的观点是，我可以使用10中的1来重现灯塔，并且上次部署是很久以前的事了。

我认为盖茨比不能解决这个问题，因为这种情况在每个人中都在发生，但原因有所不同。 我经常获得空白页，或者每当我在后端gatsby页中进行某些更改时，都会变得空白，并引发错误，并且每次错误均不同。 我认为我们必须停止使用gatsby并切换到其他可靠的框架。

如果可以重现该错误，则可以修复该错误，但是没有。 此错误是随机发生的，有时会在我部署后的第二天发生，有时会在部署后的3-4天发生。 但这确实发生了。

@antoinerousseau你发现了什么吗？ 谁能一步一步告诉我至少如何调试此问题？ 我已经尝试了所有方法，但是在部署网站中断后的1-2天。 谁能告诉我如何知道这个问题何时发生，因为对我而言，它发生得太随机了？

对我来说解决的是，我设置了S3以在404页上返回200。 当我将其更改为返回404状态代码时，它可以正常工作。

S3还是Cloudfront？

就我而言，问题出在404页中，Azure默认使用该页。 它阻止了错误，我唯一能在控制台中看到的是
Error / page resources for / not found. Not rendering React

自从我开始使用自定义404-问题就解决了。

当我在Netlify上部署应用程序时，我会得到相同的结果。

@atapas您可以联系Netlify支持吗？ 也许他们可以从自己的角度澄清一些事情？

@atapas您可以联系Netlify支持吗？ 也许他们可以从自己的角度澄清一些事情？

是的，我做到了。 谢谢！

也许，更好的堆栈跟踪或清除错误消息将对您有所帮助。 无论如何，感谢您的答复。

@atapas我不是团队成员，只是遇到与您相同的错误。

当我在Netlify上部署应用程序时，我会得到相同的结果。

我在完全不同的环境中找到了解决方案。 我收到错误消息是因为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)
  );
}