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

admin管理员组

文章数量:1398789

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

Uncaught Error: Minified React error #418; visit  
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  
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 ponent 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 ponent or code causing these minified React errors?

please refer to the image below:

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

Uncaught Error: Minified React error #418; visit https://reactjs/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/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 ponent 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 ponent or code causing these minified React errors?

please refer to the image below:

• javascript
• reactjs
• next.js
• react-hooks

Share Improve this question Follow asked Dec 8, 2023 at 8:29 KiraahmadKiraahmad 15911 gold badge22 silver badges1111 bronze badges 2

• Hydration errors are caused by invalid markup like div tags inside a p tag or by client ponents that have different values on the server and on the client. – Fabio Nettis Commented Dec 8, 2023 at 15:30
• @FabioNettis I have checked and there is no such cases, I'm trying to track the error and it seems it might be ing from a context provider, which does not return any jsx or html tags – Kiraahmad Commented Dec 8, 2023 at 17:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 ponents/functions that are being used by context provider so I dynamically imported all those ponents, providers and even a function that triggers an API call, so first you import dynamic from next.js like the following : a. import dynamic from 'next/dynamic'; b. 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

In my case the error was due to a DIV inside an A tag, by removing the inside the ponent leaving only the div and using the legacyBehavior attribute the error disappeared!

本文标签： javascriptquotMinified React error 418 and 423 in Nextjs v1231 with React v1820quotStack Overflow