在我的 Gatsby 生产版本中遇到未捕获的错误：缩小的 React 错误 #418

Question

我在 Gatsby 应用程序的生产版本中不断收到以下错误（不在开发中）。

Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

完整错误翻译为：

Hydration failed because the initial UI does not match what was rendered on the server.

但问题是，没有任何提示表明哪个组件可能导致问题。

我的堆栈：

• 盖茨比

  5.12.12

• react-dom

  18.2.0

如何解决这个问题？

Answer 1

实现 gatsby 文档中提到的 replaceHydrateFunction 应该可以解决这个问题。只需尝试将以下代码添加到您的

/gatsby-browser.js

文件中：

import ReactDOM from "react-dom/client";


export const replaceHydrateFunction = () => {
  return (element, container) => {
    const root = ReactDOM.createRoot(container)
    root.render(element)
  }
}


// Replace this by your own page wrapper:
exports.wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}