Getting Uncaught Error: Minified React error #418 on my Gatsby production build

Question

I am continuously getting the following error on the production build of my Gatsby app (not in develpment).

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.

The full error is translated into:

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

But the problem is that there is not a single hint about which component could be causing the issue.

My stack:

• gatsby 5.12.12
• react-dom 18.2.0

How can I fix this issue?

Answer 1

Implementing the replaceHydrateFunction mentioned in the gatsby docs should solve this. Just try adding the following code into your /gatsby-browser.js file:

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>
}