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

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

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