next.js: after updating react 18, i have problems with date-fns
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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 5
- Comments: 21 (4 by maintainers)
Problem seems to be related with Dates (not
date-fnsonly). 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 nativeDateobject 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.
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 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-tzto format your dates if you want to keep using date-fns.