hydration error in production but not in dev environment

[web-programmer-here]

I keep getting this error in production

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 page is linked to this message

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

this only happens in production and not development environment.

After that I added this flag and I can see the error in the development

flags: {
		DEV_SSR: true,
	},

this is happening because i am trying to show a loading message while fetching data, any ideas how to fix this?

I am using gatsby 4.19.2 and react 18.2.0

[jongwooo]

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

Hi there,

The React Hydration Error occurs using a specific library or application code that is relying on something that could differ between pre-rendering and the browser. An example of this is using window in a component's rendering.

An example:

function MyComponent() {
  // This condition depends on `window`. During the first render of the browser the `color` variable will be different
  const color = typeof window !== 'undefined' ? 'red' : 'blue'
  // As color is passed as a prop there is a mismatch between what was rendered server-side vs what was rendered in the first render
  return <h1 className={`title ${color}`}>Hello World!</h1>
}

How to fix it:

// In order to prevent the first render from being different you can use `useEffect` which is only executed in the browser and is executed during hydration
import { useEffect, useState } from 'react'
function MyComponent() {
  // The default value is 'blue', it will be used during pre-rendering and the first render in the browser (hydration)
  const [color, setColor] = useState('blue')
  // During hydration `useEffect` is called. `window` is available in `useEffect`. In this case because we know we're in the browser checking for window is not needed. If you need to read something from window that is fine.
  // By calling `setColor` in `useEffect` a render is triggered after hydrating, this causes the "browser specific" value to be available. In this case 'red'.
  useEffect(() => setColor('red'), [])
  // As color is a state passed as a prop there is no mismatch between what was rendered server-side vs what was rendered in the first render. After useEffect runs the color is set to 'red'
  return <h1 className={`title ${color}`}>Hello World!</h1>
}

I hope this helps!

[yhau1989]

In my case, I had a page component, this component calls the components of another children components. This error happened only with gatsby build

You can replicate error on localhost, making:

1. gatsby build
2. gatsby serve

Details error:

The children component have some problems with rect ^18.1.0

I am using:
gatsby: ^4.17.2,
react: ^18.1.0,
react-dom: ^18.1.0

this error also causes the page to render 2 times (it's crazy)

Please check if you have a child component that is causing this error.

[MikeCheek]

I found another code mistake that causes minified error #418 in react

I had minified react error #418 in my GatsbyJs website

The problem was that I had some components lazy loaded but I forgot to wrap them in a Suspense tag

// will cause the error
const Component= lazy(() => import('../../atoms/component'))
{...}
return <Component/>


// ok
const Component= lazy(() => import('../../atoms/component'))
{...}
return <Suspense fallback={null}>
    <Component/>
 </Suspense>

Even in this case, the problem is that the rendered version of the site is different from the server one

I hope this will help someone

[808vita]

https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#replaceHydrateFunction

please use the replaceHydrateFunction mentioned in the gatsby docs , this will solve this .

[dospolov]

Any progress on this?

[dcmwong]

I'm getting this error only when I add a #something to the end of the url so http://test.com works fine but as soon as there is a href tag at the end it shows: (ie. http://test.com#something)

react-dom.production.min.js:131 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.
    at sa (react-dom.production.min.js:131:278)
    at Ei (react-dom.production.min.js:293:379)
    at ks (react-dom.production.min.js:280:389)
    at ys (react-dom.production.min.js:280:320)
    at vs (react-dom.production.min.js:280:180)
    at as (react-dom.production.min.js:268:209)
    at S (scheduler.production.min.js:13:203)
    at T (scheduler.production.min.js:14:128)

[dospolov]

I got tired of waiting, and switched to Astro. Chao

[ArmanNisch]

If its any consolidation, to someone, anyone... next.js has the same issue when building out their static sites: vercel/next.js#43921

[808vita]

if you face errors with above then try this :

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

and make sure to import the reactDom

import ReactDOM from "react-dom/client";

[nrandell]

Is this anything to do with images being loaded from cache? I'm seeing a lot of these issues, especially when using images. I'm just wondering whether the javascript for images is running before the react javascript runs, replaces some of the dom and causes these issues.

Not fully investigated, but when is made my images lazy, it seemed to fix some of these problems.

[joebentaylor1995]

Suddenly getting this issue myself now, cant even figure out what could be causing it library wise

[joebentaylor1995]

please visit below linked gatsby docs page. https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#replaceHydrateFunction

create replaceHydrateFunction in the gatsy-browser file and probably do a clean. Then do a build and serve. This solved most of the hydration issues .

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

good thing about this is - it will be applied throughout the site .

Using this caused the error: ReactDOM is not defined

[MS3300studios]

Which file did you define the export in?
Gatsby-browser.js?

[MS3300studios]

I am having this error, because I used lazy loading. I didn't forget to wrap it in the React.Suspence component though. I will try to use export.replaceHydrateFunction though, maybe that will fix the issue.

[jon-wyatt-eco]

Using replaceHydrateFunction to use createRoot is not the right solution for this problem..

It will resolve the error but it's effectively disabling hydration and just re-rendering everything client side so your time-to-interactive is still impacted and you are missing out on one of the core benefits of using Gatsby.

Really this is just doing what React is doing for you when it encounters an error in hydration i.e. re-rendering everything and ignoring the static HTML already in DOM.

The right solution is to find the cause of the discrepancy as described in the docs though this isn't easy at all.

Another option is to use partial hydration and flag components that will only work on client side with 'use client' directive at top of file as described here