Next.js Discord

Discord Forum

Using MUI component in page with 'use client' but getting hydration error!

Unanswered
Acorn Woodpecker posted this in #help-forum
Open in Discord
Avatar
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 : 
'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
Japanese Bobtail
Could you try moving this to a separate ‘use client’ component?
Avatar
joulev
interesting... can you give me a reproduction repository?
Avatar
Acorn WoodpeckerOP
you mean export all mui components from a file and then import components from that file in page ?
Avatar
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
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
Japanese Bobtail
Dang!
Avatar
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 !
Idk what was the issue there, versions or dependencies or other but the issue is gone now
Thank you guys for your assistance : )