调试 HTML 构建

在构建静态 HTML 文件（构建时 React SSR 过程）或使用 getServerData（运行时 SSR 过程）时出现的错误通常是由于以下原因之一：

1. 您的部分代码引用了 Node.js 中不可用的“浏览器全局变量”，如 window 或 document。如果这是您的问题，您应该在上方看到类似“window is not defined”的错误。要解决此问题，请找到有问题的代码，然后 a) 在调用代码之前检查 window 是否已定义，以便在 Gatsby 构建时代码不会运行（参见下方的代码示例），或者 b) 如果代码位于 React.js 组件的 render 函数中，请将该代码移至 componentDidMount 生命周期或 useEffect hook 中，这可确保代码仅在浏览器中运行时才会运行。

2. 检查 pages 目录（及其子目录）中列出的每个 JS 文件是否都导出 React 组件或字符串。Gatsby 将 pages 目录下的任何 JS 文件都视为页面组件，因此它必须有一个作为组件或字符串的默认导出。

3. 您在同一文件中混用了 import 和 require 调用。这可能会导致“WebpackError: Invariant Violation: Minified React error #130” 因为 webpack 4 比 v3 更严格。解决方法是仅使用 import，这也适用于 gatsby-ssr 和 gatsby-browser 文件。

4. 您的应用程序在客户端未正确 hydration，导致 gatsby develop 和 gatsby build 不一致。可能是 gatsby-ssr 或 gatsby-browser 等文件的更改结构未在另一个文件中反映，意味着客户端和服务器输出之间存在不匹配。

5. 其他原因 :-) #1 是构建静态文件失败的最常见原因。如果原因是其他，您需要更有创意地找出问题所在。DEV_SSR 功能可以帮助您解决此问题。

如何检查 window 是否已定义

在 React 组件中引用 window 时。

在 require 模块时

如果代码运行需要定义模块，您可以使用三元运算符

修复第三方模块

那么，最糟糕的情况发生了，您正在使用一个 npm 模块，该模块期望 window 被定义。您可能可以提交一个 issue 来让模块得到修复，但在此期间该怎么办？

一种解决方案是自定义您的 webpack 配置，以便在服务器渲染期间用一个虚拟模块替换有问题的模块。

项目根目录下的 gatsby-node.js

另一种解决方案是使用像 loadable-components 这样的包。尝试使用 window 的模块将在客户端动态加载（而不是在 SSR 期间加载）。

gatsby develop 期间的 SSR

gatsby develop 期间，在完全重新加载时对页面进行服务器端渲染 (SSR)。这有助于您检测 SSR 错误并修复它们，而无需使用 gatsby build 进行完整构建。启用后，转到您想要的页面并执行完全重新加载（例如，Ctrl + R 或 F5）。

将 DEV_SSR 标志添加到您的 gatsby-config.js

请在 DEV_SSR 汇总讨论中提供反馈。