Minified React error #418

By Ohad Krispin, founder of VibeRaven · LinkedIn

"Minified React error #418" is the production form of "Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client." It appears only when React hydrates HTML that was made earlier: by a Vite SSR server, by a prerender step at build time, or by a framework such as Next.js. A Vite app that only calls createRoot never hydrates and cannot raise it. In a run of react-dom 19.3.1, a typeof window branch, Math.random() in the output and a div inside a p each raised #418 through onRecoverableError, and the page stayed. Render the same value on the first client render, then change it in an effect. Reproduced with react-dom 19.3.1 on 2026-10-31.

What do text and HTML mean in the Minified React error #418 link?

The link ends in args[]=text or args[]=HTML, and React puts that word where the message has %s. So the two production errors below decode to "server rendered text" and "server rendered HTML". The same error list holds #423, "There was an error while hydrating but React was able to recover by instead client rendering the entire root.", and #425, "Text content does not match server-rendered HTML.", which are separate errors.

Minified React error #418; visit https://react.dev/errors/418?args[]=text&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Minified React error #418; visit https://react.dev/errors/418?args[]=HTML&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Does a plain Vite app get hydration error 418?

Not from createRoot. Vite's SSR guide describes a server entry that renders the app with the framework's SSR API and a client entry that mounts it, with a separate SSR build for production. The HTML from that server entry, or from a prerender step that ran at build time, is what the browser hydrates. If an app you think of as a single-page app shows #418, search it for hydrateRoot, a framework config or a prerender plugin in package.json.

Which code in generated components causes error 418?

The React error list names a server and client branch, values that change on every call such as Date.now() or Math.random(), date formatting in the user's locale, external changing data and invalid tag nesting. It also lists a browser extension that changes the HTML before React loads. Three of those raised #418 in the run:

// 1. the server has no window
<p>{typeof window !== 'undefined' ? 'client' : 'server'}</p>

// 2. a different value on every call
<p>{String(Math.random())}</p>

// 3. a div inside a p is invalid HTML
<p><div>x</div></p>

Checklist

How to fix it, then check the fix

Find out whether the app hydrates, and where its HTML comes from:

grep -rnE "hydrateRoot|renderToString|renderToPipeableStream|prerender" --include=*.ts --include=*.tsx --include=*.json --exclude-dir=node_modules .

02
Search the components for values that can differ between the server pass and the browser:
```
grep -rnE "typeof window|Date\.now|new Date|Math\.random|toLocale|localStorage" src
```

Render the same value on the first client render, then change it in an effect:

const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
return <p>{mounted ? clientValue : serverValue}</p>;

04Do not put a div inside a p. In development React logged a message that starts with "In HTML," and ends with "This will cause a hydration error." for that case.
05For a value that cannot match, such as a timestamp, suppressHydrationWarning on that one element hides the warning. The hydrateRoot docs say it works one level deep and React does not patch mismatched text, so use it only where the server text may stay.
06Run the development build to read the first mismatch in full, then load the production build in a browser profile without extensions and check that the console has no #418.

Sources

Official docs behind this checklist

More provider errors

Browse all launch guides · Read resources · How to make and check your next change

FAQ

FAQ for builders before launch

Does the page still work after error 418?

In the runs on react-dom 19.3.1, React reported the error to onRecoverableError and the page stayed. The hydrateRoot docs say React recovers from some hydration errors but you must fix them like other bugs, because in the worst case event handlers can be attached to the wrong elements.

Can a browser extension cause it?

Yes. The message lists a browser extension that changes the HTML before React loads. If the error shows in one browser only, test in a clean profile before you change the code.

Where do I read the error in my own code?

Pass onRecoverableError as an option to hydrateRoot. The docs describe it as a callback called when React automatically recovers from errors, and the error you get is the one this page decodes.