来自 page-data.json 的页面数据，用于失败页面“/”答案

【问题标题】：Page data from page-data.json for the failed page "/"来自 page-data.json 的页面数据，用于失败页面“/”
【发布时间】：2022-06-29 14:08:40
【问题描述】：

运行 gatsby build 时出现此错误。我没有在我的代码中使用“文档”。谁能解释一下这是什么意思？

错误

来自 page-data.json 的失败页面“/”的页面数据：{
“componentChunkName”：“组件---src-pages-index-js”，“路径”：“/”， “结果”： { "pageContext": {} }, "staticQueryHashes": [] }

为页面构建静态 HTML 失败 - 2.990s

错误 #95312

“文档”在服务器端渲染期间不可用。

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript reactjs build react-redux gatsby

【解决方案1】：

出现此问题的原因是因为您在代码中的某个位置使用了document 全局对象，并且因为gatsby develop 是由浏览器呈现的，其中有window 和文档全局对象，但是它可以编译，当你运行gatsby build时，代码在Node服务器中编译，这里没有window或document变量，因为它们甚至还没有定义，它们是在SSR中解析的客户端变量（ S服务器-Side R渲染）。

这是正在发生的事情的极端减少，您可以在Debugging HTML Builds docs找到更详细的解释。

要修复/绕过此问题，您只需在使用 document 对象的地方添加以下条件。

 if(window !== "undefined"){
   // your document or window manipulation
 }

window 或document 在条件中可以同时使用，它们在绕过服务器端渲染方面是等效的。

如果您没有在项目中使用document，如果您的某些依赖项（第三方）正在使用它（即：画布、地图、使用 JavaScript 计算的滑块等），问题可能仍然会出现。如果这是您的情况，绕过它的方法是通过添加 null 加载程序来忽略 webpacks 捆绑：

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

其中/bad-module/ 是正则表达式 (test)（这就是为什么在斜杠之间，/）。在这种情况下，您需要将bad-module 替换为node_modules 中的依赖文件夹名称。

【讨论】：

谢谢，去掉 react_router_dom 模块后，它工作了。