Gatsby 生产时出现水合错误，但本地一切正常

Question

我正在 Gatsby 网站上工作并使用服务器端代码。一切似乎都在本地工作，但在生产中（Netlify）我们将错误记录到控制台。 错误是：

未捕获的错误：缩小的 React 错误#418；请访问 https://reactjs.org/docs/error-decoder.html?invariant=418 获取完整消息

未捕获的错误：缩小的 React 错误#423；请访问 https://reactjs.org/docs/error-decoder.html?invariant=423 获取完整消息

这些错误与 UI 不匹配有关，但我无法在本地重现它们。

Answer 1

您无法在本地重现它，因为 Gatsby 仅在客户端/浏览器上运行，而不在服务器上运行。您可以通过运行

gatsby build

然后运行

gatsby serve

来重现该错误。

Gatsby 是一个服务器端渲染框架，所有组件都会首先在服务器上渲染。在服务器上，您无法访问浏览器对象和操作，例如窗口、文档和事件侦听器。因此，如果您使用例如窗口对象，请确保将其放入 if 保护中，并首先检查窗口是否可用。

此外，React 中的 useEffect 挂钩仅在客户端中运行，因此请确保 useEffect 中的代码不会导致任何不匹配。