Replies: 38 comments 18 replies
-
|
Could you share a snippet of code that replicates the issues you are seeing? Based off of the errors and the context I'd assume that the issue is you're formatting a date on the server and then when the client goes to hydrate into that rendered content the format is different (due to timezones or difference in clocks) leading to a mismatch. There are a few ways you could resolve this:
|
Beta Was this translation helpful? Give feedback.
-
|
Exactly as @hamlim wrote, we just had such issue with dates. We were outputting only the year of a date and because of server vs client timezone difference it was 1990 vs 1989. Compare the page source and what's actually rendered where it happens - for us it did not happen on localhost (different data). This was not a new issue but only after updating to React 18 brought it to surface. |
Beta Was this translation helpful? Give feedback.
-
|
@rolandtoth I will get it only on the server. there are no such errors on localhost |
Beta Was this translation helpful? Give feedback.
-
|
Hello @Musho-T can I check how you managed to identify Dependencies: "next": "^12.1.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",Error logs for #425. Similar error logs for #418 and #423 |
Beta Was this translation helpful? Give feedback.
-
|
I have the same issue after upgrading React version to 18.2.0 with following errors: This error can be reproduced after deploying to a DockerImage with Node v16. |
Beta Was this translation helpful? Give feedback.
-
|
Anyone facing this issue, please provide a reproduction repository so we can investigate, thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Please consider the actual underlying issue: these errors are incomprehensible once minified, but they don't show up at all in development. So it's very hard to get a repro. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I also use the versions: And after start the project, I encountered the following errors: Uncaught Error: Minified React error #425; |
Beta Was this translation helpful? Give feedback.
-
|
Please read #37489 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
Problem seems to be related with Dates (not Looking forward to have some spare time to prepare a little repo example for you @balazsorban44, but I believe any nextjs project using react-18 and has any kind of Date in some of its static pages will do the trick. |
Beta Was this translation helpful? Give feedback.
-
|
we get this error because the date is different on the server and different on the client) |
Beta Was this translation helpful? Give feedback.
-
|
I also have this issue. I managed to fix some of them that was clearly date related but i still get the error on almost all pages but only for mobile users. The thing that makes it very hard, and time consuming to debug is that no matter what I've tried i can only reproduce it in production. I've tried to run the docker locally and so on but i can't reproduce it :/ You can see the issue if you go to https://alternativeto.net, open the inspector and use the "mobile emulator", then if you refresh the page it throws these errors. Is it possible to get any hint from the console there? It seems to only be react code and no hints for poor me. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same problem. Very strange. I can't reproduce it on my local. Problem site: https://churchinsydney-3mtz6jju3-churchinsydney.vercel.app/ The error is gone after removing date-fns https://churchinsydney-tefmcruxs-churchinsydney.vercel.app/ |
Beta Was this translation helpful? Give feedback.
-
|
@churchinsydney-dev your problem is probably difference on server and client. The Server probably uses UTC but not your client, I can spot the difference on "General Announcement" post where on client it says "Updated 2 hours ago" but if I view page source it says "Updated 2 minutes ago" and therefore react complains about different html on server and client. I would recommend use the package |
Beta Was this translation helpful? Give feedback.
-
|
@hafffe die you actually fix the issue with export function formatDateFull(date: string): string {
const d = utcToZonedTime(date, "Europe/Berlin");
return format(d, "iiiiii. do MMMM H:mm", {
locale: de,
timeZone: "Europe/Berlin"
});
} |
Beta Was this translation helpful? Give feedback.
-
|
I have the same problem. This is hard to debug since it only happens in the production build. |
Beta Was this translation helpful? Give feedback.
-
|
So in my case i fix this issue putting false to the swcMinify variable in the next.config file. |
Beta Was this translation helpful? Give feedback.
-
|
this worked for me too |
Beta Was this translation helpful? Give feedback.
-
|
With the input of @balazsorban44 and @zhex900, I was able to avoid this error for the time being. import { format } from 'date-fns'
export default function Post({ created_at }) {
const [createdAt, setCreatedAt] = useState(created_at)
useEffect(() => {
if (created_at) {
setCreatedAt(format(new Date(created_at), 'h:mm a ⸱ MMM d, y'))
}
}, [created_at])
return <time dateTime={created_at}>{createdAt}</time>
} |
Beta Was this translation helpful? Give feedback.
-
|
Normally a great solution, but we took a hit on performance with a similar implementation |
Beta Was this translation helpful? Give feedback.
-
|
I found another code mistake that causes minified error #418 in react I had minified react error #418 in my GatsbyJs website I finally found the cause on my site and it's not connected with a date issue The problem was that I had some components lazy loaded but I forgot to wrap them in a Suspense tag // will cause the error
const Component= lazy(() => import('../../atoms/component'))
{...}
return <Component/>
// ok
const Component= lazy(() => import('../../atoms/component'))
{...}
return <Suspense fallback={null}>
<Component/>
</Suspense>Even in this case, the problem is that the rendered version of the site is different from the server one I hope this will help someone |
Beta Was this translation helpful? Give feedback.
-
|
Im having this issue currently when I deploy to vercel. (I'm fairly new with vercel and next.js) Uncaught Error: Minified React error #425; Anyone know best way to debug errors in production build? Is there a flag I can set in |
Beta Was this translation helpful? Give feedback.
-
|
Because the issue relate to display time.
|
Beta Was this translation helpful? Give feedback.
-
|
Because the issue relate to display time.
|
Beta Was this translation helpful? Give feedback.
-
|
I have the same problem. I am using In my environment, I have Japan time ( I was able to resolve the error by setting the timezone. before (has error)dayjs(date).format(...)after (no error)dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.tz.setDefault('Asia/Tokyo')
dayjs.locale('ja')
dayjs(date).tz().format(...) |
Beta Was this translation helpful? Give feedback.
-
|
cool |
Beta Was this translation helpful? Give feedback.
-
|
instead of |
Beta Was this translation helpful? Give feedback.
-
|
This problem without date-fns |
Beta Was this translation helpful? Give feedback.
-
|
I have the same problem, I'm storing an UTC timestamp long in my database, fetching it from getServerSideProps and using I have several dynamic pages and the errors only show on a few of them even though everything related to time is the same. The issue only occurs on my Linux server. // time.js
let options = { year: 'numeric', month: 'long', day: 'numeric' };
export function ToIso(timestamp) {
return new Date(timestamp).toISOString();
}
export function ToDate(timestamp) {
return new Date(timestamp).toLocaleDateString('en-US', options);
}
// [post].js
<time itemProp='datePublished' dateTime={ToIso(post.timestamp)}>{ToDate(post.timestamp)}</time> |
Beta Was this translation helpful? Give feedback.
-
|
Figured it out! In my case it was Cloudflare HTML minifying that produced these errors. |
Beta Was this translation helpful? Give feedback.
-
|
@rubby-c Thank you! Disabling Auto Minify for HTML in Cloudflare eliminated the hydration errors in our case as well. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much!!! I've spent months debugging this in different ways and this was exactly it. Our Swedish site had the issue but not the Norwegian, Finnish and Danish, because only the SE version had the minify activated. For anyone interested: |
Beta Was this translation helpful? Give feedback.
-
|
I faced this issue too (nextjs and remix) In my case was the chrome extensions that mutate the dom (e.g. Dashlante, LastPass, etc) |
Beta Was this translation helpful? Give feedback.
-
|
FYI I logged the LastPass issue here: #51816 |
Beta Was this translation helpful? Give feedback.
-
|
We were experiencing the same issue, as mentioned in another comment on this discussion the problem was that we were rendering dates using the I only spotted this when I added We were using docker to handle our deployments, so our fix was to add This works for us as our users will only be UK based, however we're yet to see if this has any implications though. |
Beta Was this translation helpful? Give feedback.
-
|
In my case, I used a toUTCString in getServerSideProps to pass it to the client and then convert back to date object. After changing toUTCString() to toISOString() the error messages disappear. Proven that you are correct! |
Beta Was this translation helpful? Give feedback.
-
|
It's definitely a React related issue. For me, it happens in a Gatsby project only after I deploy to S3 (aws). I have these versions: Happens without Date being used in the whole project... Update: I think it was something related to the translation plugin (gatsby-plugin-react-i18next) |
Beta Was this translation helpful? Give feedback.
-
|
Expanding on @songtuyen97's comment, I was able to diagnose my issue by running: TZ="America/Denver" npm run dev # TZ must be different to your actual timezoneThis produces a nice, focused and reproducible error in my local development environment: 
|
Beta Was this translation helpful? Give feedback.
-
|
I encountered the same problem as well, but it has been resolved. I made use of @gtakat ’s comment. #39425 (comment) before: import { FC, useMemo } from 'react';
import utcToZonedTime from 'date-fns-tz/utcToZonedTime';
import format from 'date-fns-tz/format';
type Props = {
zone?: 'Asia/Tokyo';
children?: Date;
pattern?: 'yyyy.M.dd';
};
const DateFormat: FC<Props> = ({
zone = 'Asia/Tokyo',
children,
pattern = 'yyyy.M.dd',
}) => {
const formattedDate = useMemo(() => {
if (!children) {
return undefined;
}
const date = utcToZonedTime(children, zone);
return format(date, pattern);
}, [children, zone, pattern]);
return <>{formattedDate}</>;
};after: ...
const formattedDate = useMemo(() => {
if (!children) {
return undefined;
}
const date = utcToZonedTime(children, zone);
return format(date, pattern, {
timeZone: zone,
});
}, [children, zone, pattern]);
...I forgot to specify the third argument of @gtakat Thank you for your comment! ありがとうございます！大変助かりました！ |
Beta Was this translation helpful? Give feedback.
-
|
I’m sorry… This solution has a problem. |
Beta Was this translation helpful? Give feedback.
-
|
If you want to render the date in the timezone of the user keep everything on the server in UTC and render the date on the client only. Try this:
Create a client component that renders dates on the client: 'use client';
export const dateFormat = ({ date }) =>
date.toLocaleString(
// eslint-disable-next-line no-undefined
undefined,
{
year: 'numeric',
month: 'short',
day: 'numeric',
}
);
export default function RenderDate({ date }) {
return <span>{dateFormat({ date: new Date(date) })}</span>;
}Create a server component that retrieves dates and uses next/dynamic to import the client side component ensuring that SSR doesn't take place: import dynamic from 'next/dynamic';
const RenderDate = dynamic(() => import('./date'), {
ssr: false,
});
const getData = async () => {
// replace this with something that retrieves dates
return new Date();
}
export default async function Page() {
const date = await getData();
return <div><RenderDate date={date} /></div>;
}It should all work and keeps working with dates easy to reason about and simple. |
Beta Was this translation helpful? Give feedback.
-
|
in my case this happened because of timezone problem. The times changed quickly from UTC to timezone I used everytime I refresh the page. I resolved this by re-parse date and defining timezone I used at date variables. for example I used Jakarta TimeZone. const reparseDate = (date: Date) => date.toLocaleString("en-US", { timeZone: "Asia/Jakarta" });
const getPublishDate = (date: Date) => format(reparseDate(date), "MMMM do, yyyy");Code above works in my case alternative trick I used when using distance time in date-fns: don't show text from server side in component function: const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);and in rendering section: <span >{`updated ${isClient ? formatDistanceToNow(updatedAt) : "…"} ago`}</span> |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @7sferry, this work for me easily after struggle for long time. I use react18, date-fns 3.6.0 |
Beta Was this translation helpful? Give feedback.
and others
-
Verify canary release
Provide environment information
"react": "18.1.0",
"next": "12.1.6",
"react-dom": "18.1.0",
"date-fns": "2.28.0",
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
I get errors after the update, this is related to the time zone, there are countries where they do not receive these errors)
react-dom.production.min.js:119 Uncaught Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at d7 (react-dom.production.min.js:119:38) at gt (react-dom.production.min.js:206:80) at h6 (react-dom.production.min.js:281:80) at h5 (react-dom.production.min.js:280:438) at h3 (react-dom.production.min.js:280:315) at h2 (react-dom.production.min.js:280:172) at hT (react-dom.production.min.js:268:193) at A (scheduler.production.min.js:14:181) at MessagePort.g (scheduler.production.min.js:15:101)react-dom.production.min.js:148 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. at fp (react-dom.production.min.js:148:277) at _ (react-dom.production.min.js:293:444) at h5 (react-dom.production.min.js:280:375) at h3 (react-dom.production.min.js:280:315) at h2 (react-dom.production.min.js:280:172) at hT (react-dom.production.min.js:268:193) at A (scheduler.production.min.js:14:181) at MessagePort.g (scheduler.production.min.js:15:101)react-dom.production.min.js:293 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. at _ (react-dom.production.min.js:293:137) at h5 (react-dom.production.min.js:280:375) at h3 (react-dom.production.min.js:280:315) at h2 (react-dom.production.min.js:280:172) at hU (react-dom.production.min.js:271:69) at hT (react-dom.production.min.js:268:409) at A (scheduler.production.min.js:14:181) at MessagePort.g (scheduler.production.min.js:15:101)Expected Behavior
...
To Reproduce
on react version 17.0.2 didn't get such errors
Beta Was this translation helpful? Give feedback.
All reactions