"Minified React error #418 and #423 in Next.js v12.3.1 with React v18.2.0"

Question

After major updates, I started encountering the following errors in my application:

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.

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.

These errors don't specify the exact component or code causing the issue, and I'm having trouble pinpointing the source of the problem in my application.

Environment:

Next.js version: 12.3.1 React version: 18.2.0

My question is :

What steps can I take to identify/fix the specific component or code causing these minified React errors?

please refer to the image below:

Answer 1

after a couple of days I was able to finally find 2 solutions to these 2 errors:

1. downgrade current react version from v18 to v17.0.2
2. I had several components/functions that are being used by context provider so I dynamically imported all those components, providers and even a function that triggers an API call, so first you import dynamic from next.js like the following :

• import dynamic from 'next/dynamic';
• const ExampleComponent = dynamic(() => import("./path/toComponent"));

these 2 methods solved both errors for me, if you decide to choose second option you do not need to downgrade your react version. I hope someone finds these helpful