Using MUI component in page with 'use client' but getting hydration error!
Unanswered
Acorn Woodpecker posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Acorn WoodpeckerOP
I'm using Next.js v13.4.7 with App directory and MUI v5.13.6 and following is the basic code from my page.js :
and I'm using
above error occurs after reloading the page again and again. I mean some times error occurs and some times not.
'use client'
import { Container } from '@mui/material'
export default function Home() {
return (
<Container maxWidth="lg">
some text nothing else...
</Container>
)
}
and I'm using
use client
in every page because MUI uses context and all in most of their components. but I'm getting the following 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
above error occurs after reloading the page again and again. I mean some times error occurs and some times not.
13 Replies
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Japanese Bobtail
Could you try moving this to a separate ‘use client’ component?
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
interesting... can you give me a reproduction repository?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Acorn WoodpeckerOP
you mean export all mui components from a file and then import components from that file in page ?
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Japanese Bobtail
No
Make PageComponent with “use client†in its separate file. And that has the mui component rendered in it
And then in your page.js, “use server†and your page will render the PageComponent
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Acorn WoodpeckerOP
okk let me try that...
still the same error
Let me create a new next app and a repo, and share it with you guys.
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Japanese Bobtail
Dang!
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Acorn WoodpeckerOP
I created another next app and used the same MUI component and didn't get any error.
so I used the same version in old project, changed some things and now error is gone !
so I used the same version in old project, changed some things and now error is gone !
Idk what was the issue there, versions or dependencies or other but the issue is gone now
Thank you guys for your assistance : )