Next 13: Error: Minified React error #418 #43921
Replies: 32 comments 26 replies
-
Do you have any timestamps or in general time dependent strings? I reckon lighthouse is running on a timezone different to your server. |
Beta Was this translation helpful? Give feedback.
-
Seeing similar problems in a project where any time-dependent strings have been carefully wrapped in These Turns out they are even happening even on Vercel's own web app at the moment: 😅 Possibly related: #44083 |
Beta Was this translation helpful? Give feedback.
-
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, |
Beta Was this translation helpful? Give feedback.
-
Same for me... How to solve that? |
Beta Was this translation helpful? Give feedback.
-
From the url https://legacy.reactjs.org/docs/error-decoder.html/?invariant=418 mentioned in the erorr info: 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:
|
Beta Was this translation helpful? Give feedback.
-
For me a cookie consent library was the issue. Check that also if you are using one. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
Here is a open ticket for this issue: #50245 |
Beta Was this translation helpful? Give feedback.
-
Some time ago I had this error and I thought it was caused by |
Beta Was this translation helpful? Give feedback.
-
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
|
Beta Was this translation helpful? Give feedback.
-
In my case, the problem was the use of 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. I think this is due to the difference between the time zones between the client and the CI/CD server |
Beta Was this translation helpful? Give feedback.
-
I solved these errors by watching detail log. |
Beta Was this translation helpful? Give feedback.
-
Disabling dashlane password manager extension solved the issue on my end. |
Beta Was this translation helpful? Give feedback.
-
i have error only in http://webcache.googleusercontent.com/ and don't know how to reproduce it |
Beta Was this translation helpful? Give feedback.
-
I created issue with this bugs #55231 . I think it is global problem |
Beta Was this translation helpful? Give feedback.
-
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? |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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. import React, { lazy, Suspense } from 'react'; // Import components using dynamic import // Your regular component Thanks. |
Beta Was this translation helpful? Give feedback.
-
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;
}; |
Beta Was this translation helpful? Give feedback.
-
Wrapping all dynamic imported components, with |
Beta Was this translation helpful? Give feedback.
-
using Nextjs Any solution? |
Beta Was this translation helpful? Give feedback.
-
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'; |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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 elementType: "div",
pendingProps: {...} so it is a div and props of a component can be pretty determining, there is also while the procedure above was most useful for me, I more thing that I did and found a bug was to diff the 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 :) |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Am also facing a hydration error on production, tried the following to see what's going on;
But does not seem to unminify the react bundle |
Beta Was this translation helpful? Give feedback.
-
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:
Any idea how to fix this?
Beta Was this translation helpful? Give feedback.
All reactions