Next.js Discord

Discord Forum

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

Answered
Chinese perch posted this in #help-forum
Open in Discord
Avatar
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.
Answered by Asian paper wasp
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
Chinese perchOP
Im using MUI
Image
There is a typography element, but it doesn't wrap anything much
except text
Avatar
Chinese perchOP
bump
Avatar
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?
Avatar
Chinese perchOP
for point 2, there is some more code
I posted only the layout
Image
Kindoff big
I took this from the Mui docs
Avatar
Asian paper wasp
Root layout HAS to be a server component.
Avatar
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
Avatar
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?
Avatar
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?
Avatar
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 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
Chinese 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
Avatar
Asian paper wasp
Just wondering, have you been working with other React frameworks/toolchains before? e.g Create React App and Vite?
Avatar
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
https://github.com/PrateekPathak9002/rcampus
Here you go
Avatar
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.
Avatar
Asian paper wasp
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
Chinese perchOP
Wait
So
This was going on top of the layout in the root directory?
Avatar
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