Error: Hydration failed because the initial UI does not match what was rendered on the server.
Answered
Chinese perch posted this in #help-forum
Chinese perchOP
I researched the error and:
https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render
Incorrect wrapping of elements can cause this.
https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render
Incorrect wrapping of elements can cause this.
Answered by Asian paper wasp
So,
1. You do need
2. Remove
1. You do need
use client
in that file then2. Remove
<html>
and <body>
from that file. Or else you will see <html>
wrapped in another <html>
47 Replies
Chinese perchOP
Im using MUI
There is a typography element, but it doesn't wrap anything much
except text
Chinese perchOP
bump
Asian paper wasp
1. Which element/text does it say doesn't match? The error message should have mentioned
2. The code you posted seems to be the root layout. Yet, i see absolutely nothing configured for SSR (yes, it needs additional configuration). Have you taken a look at the doc and the examples?
2. The code you posted seems to be the root layout. Yet, i see absolutely nothing configured for SSR (yes, it needs additional configuration). Have you taken a look at the doc and the examples?
Chinese perchOP
for point 2, there is some more code
I posted only the layout
Kindoff big
I took this from the Mui docs
Asian paper wasp
Root layout HAS to be a server component.
Chinese perchOP
oh
btw, there are 3 errors. All for hydration
error 1 with traceback:
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <div> in <body>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Component Stack
div
eval
./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js (60:66)
Box
./node_modules/@mui/system/esm/createBox.js (37:72)
body
html
RootLayout
./src/app/home/layout.tsx (120:11)
Call Stack
throwOnHydrationMismatch
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (6789:0)
tryToClaimNextHydratableInstance
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (6834:0)
updateHostComponent$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (15520:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (17355:0)
HTMLUnknownElement.callCallback
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19443:0)
Object.invokeGuardedCallbackImpl
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19492:0)
invokeGuardedCallback
error2 seems to be the same?
error 3
Unhandled Runtime Error
Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.
Call Stack
updateDehydratedSuspenseComponent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (16440:0)
updateSuspenseComponent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (16048:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (17361:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25675:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24526:0)
I removed use client
It said either pageLayout or page.tsx needs to be client
I made page.tsx client.
"use client";
import LoginPage from "@/components/LoginPage"
export const metadata = {
title: "Login - Rcampus"
}
export default function LoginForm() {
return <LoginPage/>
}
page.tsx simply uses the code I sent above
Same errors
No change
Asian paper wasp
Mind if I ask, is that a sandbox project that you just wanna play around with and get familiar with how MUI, Next.js, and the rest of the ecosystem work?
Chinese perchOP
Uh not really
I am learning
The project is for me to learn it properly
Why though? Am I doing things verrry incorrectly?
Asian paper wasp
I don't have your entire codebase (if that's on GitHub, kindly share the link), but I can immediately spot a few problems by just taking a look at your
IMO, You are properly getting too aggressive here. Copy and paste complicated examples without having a clear idea of what it is doing won't help you much. Instead, you will just get overwhelmed.
layout.tsx
that you posted.IMO, You are properly getting too aggressive here. Copy and paste complicated examples without having a clear idea of what it is doing won't help you much. Instead, you will just get overwhelmed.
Issues like:
Since root layout has to be a server component:
1. There shouldn't be
2.
Since root layout has to be a server component:
1. There shouldn't be
useState
in it 2.
styled
is a client only function and should exist in root layout as wellChinese perchOP
the only part of the code I copied was the Mui persistant drawer, to form the basis
I'm doing the login logout and everything else myself
Asian paper wasp
Just wondering, have you been working with other React frameworks/toolchains before? e.g Create React App and Vite?
Chinese perchOP
No. This is my first time using next. I've done basic react though
I've done python and js for nearly 5 years now
though
Here you go
Asian paper wasp
OK, turns out that is NOT the root layout, but
home/layout.tsx
no wonder Next.js doesn't complain about it being a client component.Asian paper wasp
So,
1. You do need
2. Remove
1. You do need
use client
in that file then2. Remove
<html>
and <body>
from that file. Or else you will see <html>
wrapped in another <html>
Answer
Chinese perchOP
Wait
So
This was going on top of the layout in the root directory?
Asian paper wasp
Yeah, when you are in
/home
the page is rendered as:<RootLayout>
<HomeLayout>
<HomePage />
</HomeLayout>
</RootLayout>
You can inspect the HTML in the browser dev tool to take a look