Next 13: Error: Minified React error #418

[surjithctly]

When checking the pagespeed score using lighthouse, It says Browser Errors were logged in to console thus reducing the Best Practices score. But this error is never logged in Chrome or any other browser. Only using Lighthouse shows this error.

Error:

…chunks/framework-7751730b10fa0f74.js:9:47099(www.site.sh) | 
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 lR (https://www.site.sh/_next/static/chunks/framework-7751730b10fa0f74.js:9:47100) at i (https://www.site.sh/_next/static/chunks/framework-7751730b10fa0f74.js:9:121422) at o3 (https://www.site.sh/_next/static/chunks/framework-7751730b10fa0f74.js:9:107166) at o1 (https://www.site.sh/_next/static/chunks/framework-7751730b10fa0f74.js:9:107094) at o0 (https://www.site.sh/_next/static/chunks/framework-7751730b10fa0f74.js:9:106957) at oj (https://www.site.sh/_next/static/chunks/framework-7751730b10fa0f74.js:9:102071) at x (https://www.site.sh/_next/static/chunks/framework-7751730b10fa0f74.js:33:1374) at MessagePort.T (https://www.site.sh/_next/static/chunks/framework-7751730b10fa0f74.js:33:1904)

Any idea how to fix this?

[icyJoseph]

Do you have any timestamps or in general time dependent strings? I reckon lighthouse is running on a timezone different to your server.

[raphaelsaunier]

Seeing similar problems in a project where any time-dependent strings have been carefully wrapped in <ClientOnly /> (or <NoSSR />) components to prevent any mismatch between the server and the client.

These Minified React errors have been eating up our Sentry quota and strangely they only occur on our production deployment on Vercel.

Turns out they are even happening even on Vercel's own web app at the moment: 😅

Possibly related: #44083

[surjithctly]

You should add this vercel screenshot to the issue page as well. This only seen in safari right? Chrome seems to ignore it.

[ptk-dev]

Chrome also has been displaying this issue

[genox]

I experience the same issue: no errors in dev, only in production.

Maybe this will lead you on to a solution: #37489

At least in my case, this is probably the root cause of the issue since I use dates and in particular, date-fns. But this seems to happen basically anywhere a date mismatches between server and client. Sometimes I ask myself wether we make our lives harder intentionally, this just seems masochistic the more I stumble over such esoteric issues. 🤣

[dejurin]

I got same msg error, but I not use date-fns

[lizbedev]

In my case date-fns was causing the error. This comment helped me find it. Thanks @genox

[semy]

Same for me... How to solve that?

[shrekuu]

From the url https://legacy.reactjs.org/docs/error-decoder.html/?invariant=418 mentioned in the erorr info:
"Hydration failed because the initial UI does not match what was rendered on the server."
It it still a hydration error.

Check this file "https://www.site.sh/_next/static/chunks/framework-7751730b10fa0f74.js" (clearly you updated your code and this file is not there) at "47100" this position for some info.

If you really really cannot solve this, then just return null for the first render and then render the real view after the initial render, like this:

export default function MyAwesomeComponent() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  if (!mounted) {
    return null; // return this null to avoid hydration errors
  }

  return <div>my real view here</div>;
}

[IlirEdis]

For me a cookie consent library was the issue. Check that also if you are using one.

[steadyGuy]

I'm facing the same issue on prod when trying to view the page on google cache, so it's really hard to debug.

I'm using next.js 13.4.1.
I have also tried to use suppressHydrationWarning={true} on body and html tag on the other project but it seems that it didn't help.

[steadyGuy]

The issue remains. However, in my case, I was able to identify the reason for the issue. It was because of the use of async components. I disabled javascript in the Chrome browser using an extension and figured out that those pages that were using async components broke the page with an error.

You can try it yourself. Mention me, if you have the same reason of the error.

[pogran]

@steadyGuy what are you mean async component? for example I have page.tsx file

export default async function Page() {
  return (
	<div className="mx-auto sm:max-w-7xl pb-4">
		<p className="mt-4 text-red-500">example</p>
	</div>
  )
}

is it async component?

[steadyGuy]

@pogran yes it is, but it happens to me only in nested RSC(async components) of the page file. I even wrapped them in but it didn't help.

[pogran]

@steadyGuy what you mean nested rsc? we can you async component only on page.tsx page. I use it only here, but i have google cache errors also without async components

[steadyGuy]

@pogran we can use async components inside page.tsx too. But if you have errors even without them, then you have another reason of error.

[ArmanNisch]

Here is a open ticket for this issue: #50245

[icyJoseph]

Got some screenshots, or console errors to share?

[ArmanNisch]

@icyJoseph I will add this to the actual open ticket; I also added more details here: #50245 (comment)

[TangoPJ]

I got the same problem. I'm using Next.js 13.4 with Chakra UI. I got this error by running the project locally: yarn dev

[icyJoseph]

Dev mode shouldn't not output minified errors, that's really strange. Are you maybe using a repository setup where you consume only production compiled React?

[etaelith]

Same issue using next 13.4 and ScrollReveal for delay in home page, only error in deploy =/

[lizbedev]

Some time ago I had this error and I thought it was caused by date-fns but, after a while, I had the same problem. For some reason that I don't understand removing lazy imports and suspense component renders solves the problem.

[bruceharrison1984]

I'm seeing this issue as well when exporting a NextJS static site, and deploying on to Github pages. Everything works great in dev, but once deploy I get

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.

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

[chmielulu]

In my case, the problem was the use of new Date, even if I only used it to convert a constant string to a user-readable date

export const tinaDatetimeToLocaleString = (
  tinaDatetime: string, // e.g 2023-07-02T22:00:00.000Z
  locale: LocaleKey, // e.g en
) => {
  const date = new Date(tinaDatetime);
  return date.toLocaleDateString(locale, {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
};

I didn't notice any problems locally, either in development or in production. The problem arose when I deployed the site online via CI/CD.
The solution was to simply stop using new Date and instead manually parse the datetime string.

I think this is due to the difference between the time zones between the client and the CI/CD server

[ysuzuki19]

I solved these errors by watching detail log.
next dev shows more detailed logs than SSG.

[joonaaas]

Disabling dashlane password manager extension solved the issue on my end.

[Inlustra]

We just figured out that Dashlane is the cause of some breakages in our app also.
Did you ever solve this?

[pogran]

i have error only in http://webcache.googleusercontent.com/ and don't know how to reproduce it

[pogran]

I created issue with this bugs #55231 . I think it is global problem

[deniapps]

I got this error on Brave only—something related to Google Adsense.

[bperezglez]

We have that error too, so, we checked all the dynamic imports and wrapped it with the suspense. With that, we resolve the hydrate error

[amrtaher1234]

We experience the same issue here, we are deploying an SSG using cloudfront.

The issue happens after new deployments for a while, if I deployed and reloaded the same page I'll see the error a couple of times until I navigate to some pages and then it fades away. Is there a reason for that? Maybe caching issues?

[JinYuSha0]

Sometimes the chrome extension may cause this problem because it has inserted some dom nodes before the hydration is completed, but I didn't find a solution. If anyone has any advice, please let me know. Thanks

[raheelafca]

Seeing similar problems in our project. sometime chrome extension generate that kind of errors. there is two solution for you may be it's help you .

1). remove chrome or browser extension.
2). you can try code like this eg:

import React, { lazy, Suspense } from 'react';

// Import components using dynamic import
const LazyComponent1 = lazy(() => import('./LazyComponent1'));
const LazyComponent2 = lazy(() => import('./LazyComponent2'));
const LazyComponent3 = lazy(() => import('./LazyComponent3'));

// Your regular component
const RegularComponent = () => (

);

Thanks.

[JinYuSha0]

It is unrealistic to disable chrome extensions. We cannot make decisions for users. I have a solution, which is to remove "dirty" dom nodes before hydration is completed. This works for me, but it may not work for everyone.

async function hydrate() {
  let recoverMethods: Function[] = [];
  function remove(elem: HTMLElement) {
    elem.parentElement?.removeChild(elem);
    return elem;
  }
  function keepClean(
    container: HTMLElement,
    detectKeep: (node: HTMLElement) => boolean,
  ) {
    let temp: HTMLElement[] = [];
    container.childNodes.forEach((elem) => {
      const _elem = elem as HTMLElement;
      if (!detectKeep(_elem)) {
        temp.push(remove(_elem));
      }
    });
    return () => {
      if (!temp.length) return;
      temp.forEach((elem) => container.appendChild(elem));
      temp = [];
    };
  }
  function recover() {
    recoverMethods.forEach((method) => method());
    recoverMethods = [];
  }
  recoverMethods.push(
    keepClean(document.body.parentElement!, (node) => {
      return ['HEAD', 'BODY'].includes(node.tagName);
    }),
    keepClean(document.body, (node) => {
      return node.getAttribute('id') === 'root';
    }),
  );

  startTransition(() => {
    hydrateRoot(
      document,
      <Mount onMount={recover}>
        <App/>
      </Mount>,
    );
  });
}

const Mount: React.FC<React.PropsWithChildren<{ onMount: () => void }>> = (
  props,
) => {
  useEffect(props.onMount, []);
  return props.children;
};

[nocodehummel]

Wrapping all dynamic imported components, with suspense: true, inside React Suspense did not solve the problem in my case.

[khRasikh]

using Nextjs 14.0.4 , I am facing the same issue:

Any solution?

[rajendar-m]

I got the similar "Minified React error" issue in my nextjs(13.3) app, but I could solve it by removing the useParams from react-router-dom ("^6.11.1")dependency, so for me it is a pure react(18.2.0) library dependency issue. Followed brute force way, removing parts of the page to isolate that issue.

//import { useParams } from 'react-router-dom';

[mmswi]

Having this error too. It happened after I started importing directly from files and not barrel files and also using some dynamic imports. I've been trying to fix it for the last 4 days, but can't seem to find a cause.

[c0b41]

do you have live link?

[mmswi]

it's a big project with thousands of imports and files. on localhost, production build is ok, no errors. after deploy, we get the error. to summarize, nrwl nx 10+ local libs + nextjs + platejs. the normalizers from platejs are adding an extra div on client versus server for the inline type nodes only on the readonly/public state of the editor and only if an inline element is alone on a row.

this error appears on our qa env with the latest changes that use dynamic imports and direct file imports. in prod, we have the old code version without this error.

[jomarmontuya]

I'm having this issue too, it only appears on production, here's my website -> https://www.professionalcarcarriers.com/services/individual-transport-canada/

when the page is mounted the page is freeze you have to click it once make interactiion available

[jomarmontuya]

Found a fix hydration issue occurs when you call suspense inside the server components, all i did is to use next dynamic instead and set component ssr to false

[khRasikh]

serverActions is no longer supported in Nextjs 14.0.0. Alternatively, using server packages minification in your next.config.js should resolve the problem.

1. if you are using azure/blob-storage:
   experimental: { serverComponentsExternalPackages: ['@azure/storage-blob'], // deactivating serverMinification by lib },

2. if you are using any other library and facing the issue, server modification should be like this:
   serverMinification: true,
   if you deal with azure,
   good luck :)

[kukulkanParanoici]

I had these same issues only in production. It seems there can be potentially a lot of different reasons for it to happen, like locale management, date usage during render, etc. In my case it was some slight differences in space and comment handling in the html caused by cloudflares "Auto Minify" feature, which is deprecated and will soon be not available anymore, but that caused the difference between client and server html.