after updating react 18, i have problems with date-fns

[Musho-T]

Verify canary release

• I verified that the issue exists in Next.js 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

[hamlim]

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:

• Wait to format the date on the client instead of on the server
• suppressHydrationWarning on the nearest parent HTML element around the formatted time may work, although I haven't tested this
• You may also be able to wrap the formatted time in a <Suspense> boundary, which React may be able to patch up without errors on the client (also haven't verified this approach)

[rolandtoth]

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.

[Musho-T]

@rolandtoth I will get it only on the server. there are no such errors on localhost

[khengsaurus]

Hello @Musho-T can I check how you managed to identify date-fns as the cause of your issue?
I'm seeing the exact same errors (425, 418, 423) on vercel deployment, and I'm not using date-fns. No such errors when running yarn dev & yarn build && yarn start locally.

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

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 Zr (framework-4556c45dd113b893.js:1:43705)
    at qu (framework-4556c45dd113b893.js:1:85317)
    at ks (framework-4556c45dd113b893.js:1:109548)
    at bs (framework-4556c45dd113b893.js:1:109429)
    at gs (framework-4556c45dd113b893.js:1:109296)
    at vs (framework-4556c45dd113b893.js:1:109159)
    at ls (framework-4556c45dd113b893.js:1:104263)
    at S (framework-4556c45dd113b893.js:1:138450)
    at MessagePort.T (framework-4556c45dd113b893.js:1:138984)
Zr @ framework-4556c45dd113b893.js:1
qu @ framework-4556c45dd113b893.js:1
ks @ framework-4556c45dd113b893.js:1
bs @ framework-4556c45dd113b893.js:1
gs @ framework-4556c45dd113b893.js:1
vs @ framework-4556c45dd113b893.js:1
ls @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1

[Moranilt]

I have the same issue after upgrading React version to 18.2.0 with following errors:

framework-4556c45dd113b893.js:1 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 sa (framework-4556c45dd113b893.js:1:48561)
    at xi (framework-4556c45dd113b893.js:1:122126)
    at bs (framework-4556c45dd113b893.js:1:109368)
    at gs (framework-4556c45dd113b893.js:1:109296)
    at vs (framework-4556c45dd113b893.js:1:109159)
    at ls (framework-4556c45dd113b893.js:1:104263)
    at S (framework-4556c45dd113b893.js:1:138450)
    at MessagePort.T (framework-4556c45dd113b893.js:1:138984)

```
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 xi (framework-4556c45dd113b893.js:1:121812)
at bs (framework-4556c45dd113b893.js:1:109368)
at gs (framework-4556c45dd113b893.js:1:109296)
at vs (framework-4556c45dd113b893.js:1:109159)
at as (framework-4556c45dd113b893.js:1:105939)
at ls (framework-4556c45dd113b893.js:1:104490)
at S (framework-4556c45dd113b893.js:1:138450)
at MessagePort.T (framework-4556c45dd113b893.js:1:138984)
```

This error can be reproduced after deploying to a DockerImage with Node v16.

[balazsorban44]

Anyone facing this issue, please provide a reproduction repository so we can investigate, thanks!

[malekpouri]

Hi, I also use the versions:
Dependencies:

"next": "^12.1.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",

And after start the project, I encountered the following errors:

Uncaught Error: Minified React error #425;
Uncaught Error: Minified React error #418;
Uncaught Error: Minified React error #423;

[balazsorban44]

Please read #37489 (comment)

[guilleigmu]

Problem seems to be related with Dates (not date-fns only). I've also been working on a project using react-18 and next.js 12.2.0 and we've only been facing this issue since we added a native Date object in our pages.

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.

[Musho-T]

we get this error because the date is different on the server and different on the client)

[olaj]

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.

[churchinsydney-dev]

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/

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.

[hafffe]

@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 date-fns-tz to format your dates if you want to keep using date-fns.

[iMarv]

@hafffe die you actually fix the issue with date-fns-tz?
I have been hardcoding the timezone everywhere I could find and the page still seems to readjust the dates in the client:

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"
  });
}

[zhex900]

I have the same problem. This is hard to debug since it only happens in the production build.

[Tonyce]

also have the same problem(Uncaught Error: Minified React error #425) without use date-fns. https://dblog-three.vercel.app/

[zhex900]

I am not sure the problem is timezone.

For my site. The static generated site has the value Last updated: 6 days ago, but in the live site the value is Last updated: 3 days ago

[Christian-Mar]

I had the same problem (Minified React errors #425, #418 and #423) with next.js getting the date from Sanity (backend) when I used the following code:

<p>Published on {new Date(post._createdAt).toLocalDateString()}</p>

I installed moment (library):

npm install moment

Imported it:

import Moment from 'moment';

and now use the following code:

<p>Published on {Moment(post._createdAt).format('DD-MM-YYY')}<p>

... and now it works without the errors.

So, instead of creating a date object with the new Date() constructor, I now just read the date from the backend.

Maybe this can help for some of you?

[axclever]

moment.js solved issue for particular situations but this error still present on pages where I need to render Date multiple times. Like a list of comments with creation date.

Keep diggin

[axclever]

You can also doesn't render Date on server and only on client. Maybe it would be helpful for you guys #35773

[balazsorban44]

So based on the responses, the issue seems to be that React now warns about hydration mismatches when a Date is rendered differently on the server and the client. This is not new to React 18, although the warning has been surpassed before.

This can happen for example if your server is not in the same timezone as your user, rendering the values differently. (That's why you don't experience this locally, since your machine is both the server and the client, at the same time zone.)

An example of this could be:

export default function Home(props) {
  return <p>{new Date(props.date).toString()}</p>
}

export function getStaticProps() {
  return { props: { date: Date.now() } }
}

There are different techniques to avoid this problem, most of them involve useEffect that is only executed after hydration. You can render the server value first, then re-render on the client, you can render a placeholder UI first, or can server-render the page.

Since this is not a Next.js bug, I'll move this to a discussion.