Next.js Discord

Discord Forum

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Answered
Prime posted this in #help-forum
Open in Discord
Avatar
PrimeOP
Answered by Mwskwong
So,

1. You do need use client in that file then
2. Remove<html> and <body> from that file. Or else you will see <html> wrapped in another <html>
View full answer

47 Replies

Avatar
PrimeOP
Im using MUI
Image
There is a typography element, but it doesn't wrap anything much
except text
Avatar
PrimeOP
bump
Avatar
Mwskwong
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?
Avatar
PrimeOP
for point 2, there is some more code
I posted only the layout
Image
Kindoff big
I took this from the Mui docs
Avatar
Mwskwong
Root layout HAS to be a server component.
Avatar
PrimeOP
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?
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)
error 3
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
Avatar
Mwskwong
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?
Avatar
PrimeOP
Uh not really
I am learning
The project is for me to learn it properly
Why though? Am I doing things verrry incorrectly?
Avatar
Mwskwong
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 layout.tsxthat 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 useState in it
2. styled is a client only function and should exist in root layout as well
Avatar
PrimeOP
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
Avatar
Mwskwong
Just wondering, have you been working with other React frameworks/toolchains before? e.g Create React App and Vite?
Avatar
PrimeOP
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
Avatar
Mwskwong
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.
Avatar
Mwskwong
So,

1. You do need use client in that file then
2. Remove<html> and <body> from that file. Or else you will see <html> wrapped in another <html>
Answer
Avatar
PrimeOP
Wait
So
This was going on top of the layout in the root directory?
Avatar
Mwskwong
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