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

[vk-0-7]

React-slider was creating the issue in my case

[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]

@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.

[steadyGuy]

@pogran greetings from the future)
I still have a problem with this error on Google Cache. However, I now understand the issue: it's because WebCache wraps all the content of the page with a div element, which leads to a hydration error (since a div cannot be the root element of an html element). If we download the content of the site from the cache and remove that div or rename it to html, everything will work fine.

Interestingly, the same issue occurs on the Vercel site, the Next.js site, and OpenAI's site as they all use the app directory. An example of this issue with cache on the OpenAI site can be found here/)

I don't know what to do because it's not okay that Google wraps all the content with a div, but at the same time, there is no way to avoid the hydration error without modifying the React or Next.js package itself to somehow avoid that hydration error
I saw that you created an issue, but it was closed. Maybe you should recreate it with this additional information?

[juligris]

I am experiencing this same issue.

[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.

[harishbumsa]

happening to me as well

[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?

[pthieu]

for me, it was last pass' "show fill options automatically", something to do with them adding an autofill div to my input element

[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

[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

[mohas]

this is not a real fix but erasing the problem altogether

[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.

[mohas]

So how I approached this problem was to to get two versions of my server rendered html using "view page source" a couple of minutes apart and diff them, turns out new Date() was used to generate some script urls and thus was not visible on the rendered page

[murilo1008]

How do you solve this error? I realy need to solve this

[mohas]

I really suggest you upgrade to newer versions of next.js, I recently read that next is going to show more meaningful error messages about this error, if there is not enough info in the error message this is going to be very hard to debug especially in a large project

[mohas]

OK, update on this, while I'm still unable to solve my issue I have some progress, first of all you have to focus on error #418 because it seems that this error is thrown for each instance of hydration mismatch and is related to dom elements, errors 423 and 425 are thrown once, if you see the stack trace of such 418 issue, the first line when clicked takes you to where the exception is thrown:

    }
                } else {
                    if (eI(a))
                        throw Error(l(418));
                    a.flags = -4097 & a.flags | 2,
                    eE = !1,
                    eC = a
                }

as you can see here a is checked before error is thrown, when I inspected a it seems that this is a react component before attaching to dom, I noticed that it has some properties that I can use to track its location in my project:

elementType: "div",
pendingProps: {...}

so it is a div and props of a component can be pretty determining, there is also children in the pending props.
and also when inspecting the return property it contains a stateNode that is an actual dom node, if you hover over it it shows the exact location in chrome at least, so this is how I got a clue that there were multiple errors from incorrect nesting to using localized time formatting that renders different values on server and client.

while the procedure above was most useful for me, I more thing that I did and found a bug was to diff the __NEXT_DATA__ object in the browser console that I think represents the client side props and contents of one <script id="__NEXT_DATA__" type="application/json"> tag that I concluded contains the server side props, I noticed that they are different and some translation dictionaries were omitted on the server props but were there in the client props. just JSON.stringify them for property sorting and throw in a diff software.

It was very frustrating and odd as in the react website they say that you should treat these as actual errors and fix them, so at least provide more info and force developers to fix or suppress them as soon as possible, imagine fixing such error on a project with hundreds of components, and there is no correspondence between number or errors and anything on the page because there are actually multiple causes not just one component. It is basically just saying some error happened somewhere sometime I don't know maybe fix it I'm too tired just let me be :)

[srimanth-duggineni]

I think its probably just me, in my case I had another app folder inside the main app folder because I wanted a /app route.
After lots of debugging and trying everything in this thread, renaming the second app folder worked.
Now I have all my routes under something else not /app/account etc..,

[Netail]

Am also facing a hydration error on production, tried the following to see what's going on;

const nextConfig = {
    swcMinify: false,
    experimental: {
        serverMinification: false,
    },
    webpack: (config) => {
        config.optimization.minimize = false;
        config.optimization.minimizer =[];

        return config;
    }
};

But does not seem to unminify the react bundle

[mislavmiocevic]

Hi. Also getting some errors in Next 14.2.3.

What is weird is the following:

• Running npm run dev or npm start (after npm build) shows NO errors
• Opening app in Firefox (any size), Edge (any size), Safari (desktop) and Chrome (desktop) shows NO errors -> here desktop means just bigger resolution, e.g. not a responsive mode
• Opening app in Chrome (mobile) or Safari (mobile) SHOWS errors

I am using Chakra UI, so I am not sure if something is related with the breakpoints.

[navata]

I same issue with you.

[ninnroot]

I am using next 13.4.3, and the cause of the problem in my case was because of Radix UI's progress bar component. I was using Shadcn UI, and the problem was with one of its dependencies.

"@radix-ui/react-progress": "^1.1.0"

I haven't investigated the actual root cause yet.

[martinfoakes]

So I don't know if this will help anyone but I was having the same issue in my project, only on prod. deployments, only on Mobile views, incredibly painful to debug as kept having to redeploy on every change, and has taken days of experimenting, but for my case I found:

• No use of new Date() or any datetime library was causing the issue
• No incorrect HTML nesting usage at all in the repo causing the issue
• No problems with any third party libraries or packages
• No conditional / dynamic rendering of any components in root or other layout.tsx files causing the issue
• No other potential causes I've read about in the last week of debugging this, in the seemingly hundreds of threads and messages on it were causing it

I managed to track down that the cause of the issue was an Image component being used within one of the layout.tsx Server components. Not just a usage of next/image, but it happened even with any regular <img> tag, BUT only when using any image format that was not SVG.

I've seen now too that the only web app in my team using latest Next.js that is not having these issues only has a few SVG images within it, the rest all have a mix of other img types being used

Hopefully this can help anyone else struggling with this. I have no idea WHY this is happening, still working on a fix for it without just removing the image or converting it.

But maybe check your images folks if you're truly running out of ideas... 🤷

[undesicimo]

One problem i ran into was making a route without a layout component

[davidd74]

hey, did you make a route in app or pages router without the layout?

[undesicimo]

In my case it was app router nextjs 14 <

[EvanJenkins27]

Looks like as of September 16th, the date-fns team has added support for time zones. Hopefully this helps anyone who is experiencing this issue as a result of date-fns https://blog.date-fns.org/v40-with-time-zone-support/

[chrisyerkes]

Updating to this version and implementing the timezone features seemed to fix it for me.

[vk-0-7]

I was facing the same error then i found that the React-slider was creating this issue

[nocodehummel]

In my case the minified 418 error is only reported by PageSpeed, There are no errors in the browser log. The error disappeared after removing missingSuspenseWithCSRBailout: false from the Next.js config and implementing the Suspense boundary around useSearchParams.

[keremcanseker]

Hi there can you please share the code

[nocodehummel]

Hard to share the code, but I will try to explain. My next.config.js contained missingSuspenseWithCSRBailout: false under experimental settings. I removed that setting from the config. Than also look for the React hook useSearchParams in the code. Components that use the hook are wrapped inside React Suspense, also when the useSearchParams hook is lower down in the component tree.

<Suspense fallback={<Loading />}>
    <MyComponent data={data} device={device} limit={limit} />
</Suspense>