Uncaught Error: Minified React error #425, #418, #423 and #329 in production

dicash commented 1 year ago

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/youthful-williamson-9pgj6k?file=%2Fpages%2Findex.tsx%3A4%2C2

To Reproduce

Standard next application

/app/page.tsx

export default function XXX() {
return [`Service\n and protection`, `Help when\n you need it`, `Complimentary\n member benefits`]
}

Current vs. Expected behavior

Local next dev or local next build / next start work fine, logs are clear. When deployed to vercel, this shits the bed with errors like

Uncaught Error: Minified React error #425, #418, #423 and #329 Which are

Unknown root exit status.
Text content does not match server-rendered HTML.
Hydration failed because the initial UI does not match what was rendered on the server.
There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
Expected to not break hydration

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

No response

kelvinsekx commented 1 year ago

I am having the "Uncaught Error: Minified React error #423;" with nextra. I really do not know where the hydration problems were coming from.

kelvinsekx commented 1 year ago

I am having the "Uncaught Error: Minified React error #423;" with nextra. I really do not know where the hydration problems were coming from.

I resolved mine by uninstalling the former nextra and nextra-theme-blog versions, then replacing it with their latest

egormanakin commented 1 year ago

The same issue

cycyewt commented 8 months ago

remove \n or replace with <br />

vogelino commented 3 months ago

I'm having this error Unknown root exit status in production as well an have trouble finding more information about it. What does Unknown root exit status even mean?

I'm not sure it this is at the origin of a bug I'm attempting to resolve, which consists of having the client code not loading or executing on the page (not "taking over"). Interactivity isn't enabled until the page is reloaded. Once reloaded other errors are triggered #425, #418, and #423.

Here is a video of what is happening:

https://github.com/vercel/next.js/assets/2759340/2c147964-3c0c-46e5-b664-0182784ea31d

Here is the code (open source, not well documented yet): https://github.com/SocialChangeLab/media-impact-monitor

And here the deployed URL: https://dev.mediaimpactmonitor.app/

vogelino commented 3 months ago

I achieved to fix it by wrapping the react-query client provider in a Suspense boundary. However I keep having hydration errors (#422, #425) that only happen on production (vercel) and not when building locally (npm run build && npm run start). Not too sure why the issue happens and why it was fixed using a Suspense boundary. I only do client-side data-fetching and only use server-components the layout. 🤔

saulve commented 3 months ago

I finally managed to clear these errors. Sharing the solution in case somebody else find it useful. In my case the issue was as follows:

I'm using next-intl for translations which required me to put my app under the dynamic [locale] route.
The main app html is generated in LocaleLayout
I also had a global not-found.tsx, which required me to create a RootLayout in the project root.

I was dynamically rendering Vercel's <Analytics /> and <SpeedInsights /> inside the RootLayout:


import { PropsWithChildren } from "react";
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";

// Since we have a root not-found.tsx page, a layout file // is required, even if it's just passing children through. export default function RootLayout({ children }: PropsWithChildren) { return ( <> {process.env.NODE_ENV === "production" && } {process.env.NODE_ENV === "production" && } {children} </> ); }



Dynamically rendering `<Analytics />`  and `<SpeedInsights />` in `RootLayout` is what caused the problem since `<html>` element was not available there. Once I moved the rendering of these components to my `LocaleLayout` the errors stopped.

To clarify I had these errors both when running `npm run build` locally and when deployed on Vercel.

vercel / next.js