Hydration issues still exist with NextJS when applying custom themes about material-ui HOT 8 CLOSED

And awesome work on Mui Joy, it is leaps and bounds easier to work with than material. Global variants is an amazing idea, and overriding the default props within the theme is genius.

from material-ui.

@jamietdavidson It sounds like you'll need to move the exported metadata to a Server Component. This is a Next.js specific issue, so your best bet from here would be to seek help on Stack Overflow. Best of luck! This new paradigm of Server and Client Components can be really tricky to untangle. If you don't have a specific need for the App Router, I might suggest reverting to the Pages Router so you don't have to worry about this stuff at all.

from material-ui.

Hey Jamie 👋 This error message is correct:

Error: Attempted to call getInitColorSchemeScript() from the server but getInitColorSchemeScript is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

You're calling {getInitColorSchemeScript()} in layout.tsx which is a Server Component—you'll need to add the "use client" directive to that file as well for it to work.

from material-ui.

Hi @samuelsycamore !

Thanks for the reply. I suppose I don't understand the mechanics of Next 14 too well yet. I am then faced with:

You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

Removing the export prevents my page from having a name when looking at my tabs. What would you recommend I try next?

from material-ui.

@samuelsycamore Will do! Thanks for the timely help :)

from material-ui.

Cheers @jamietdavidson! I think @siriwatknp deserves most of the praise for Joy UI so hopefully he sees this! 😁

from material-ui.

You're calling {getInitColorSchemeScript()} in layout.tsx which is a Server Component—you'll need to add the "use client" directive to that file as well for it to work.

@samuelsycamore getInitColorSchemeScript shouldn't need to be a client component.

from material-ui.

Duplicate of #39010

from material-ui.