Minified React error #418

Minified React error #418 means the server HTML did not match React's first browser render. The production message does not identify the changed element. Reproduce the page in development for a diff, or inspect the production page with a browser check.

The error

React 19:

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.

React 18:

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.

In React 18, #423 may follow when the whole root switches to client rendering.

What minified React error #418 means

React error 418 has different full wording by version:

The react.dev error 418 page decodes the current wording, which may differ from an older app's version. The production code does not include the element or values.

An attribute-only difference may not produce #418. A wrong class or href can remain silent in a React 19 production build.

Why it can appear only in production

Deployment can change the server timezone, locale, cached HTML, or CDN response. Real users may also have browser extensions. See errors only in production if the page works locally.

How to fix error 418

1. Find the difference. Try a development build for React's full diff. If it does not reproduce, check the production page directly.

2. Match the changed value to a cause. A date, number, class, or element each points you to a different fix.

3. Make the first browser render match. For example, this number uses each runtime's default locale:

   TypeScriptJavaScript

   export function Price({ amount }: { amount: number }) {
     return <span>{amount.toLocaleString()}</span>;
   }

   Copy

   Pass the same locale to both renders instead:

   TypeScriptJavaScript

   export function Price({
     amount,
     locale,
   }: {
     amount: number;
     locale: string;
   }) {
     return <span>{amount.toLocaleString(locale)}</span>;
   }

   Copy

   See common causes for other fixes.

4. Check again after the fix. Another mismatch may have been hidden behind the first one.

Find every instance

hydration-proof checks a production build by default. Use both modes for production behavior and development messages together:

npx hydration-proof test --mode both

The report identifies changed text as HP1001, a changed element as HP1007, and a re-rendered boundary or root as HP1010 or HP1011. If React reports the error but the comparison cannot locate it, see HP2001. Browser source maps can improve production source locations.

Related

• All minified React hydration codes
• The full React 19 message and its diff
• Hydration errors that only show up in production
• Timezone mismatches between server and browser
• Detect hydration errors in CI