Next.js Discord

Discord Forum

Debugging hydration errors

Answered
Molossus of Epirus posted this in #help-forum
Open in Discord
Molossus of EpirusOP
I am running into a hydration error in production builds, specifically: https://legacy.reactjs.org/docs/error-decoder.html/?invariant=423

I am new to Next.js 13 and I just wonder how one would go about finding the cause of the issue?

I am testing on multiple devices and only some of them are facing the issue.

I am using MUI v5 and for every component that uses MUI components I am marking with "use client": https://github.com/mui/material-ui/issues/34896

Any help would be greatly appreciated!
Answered by Molossus of Epirus
The issue was actually an unsupported regex in safari, changing it solved the issue 😬
View full answer

26 Replies

Asian black bear
How did you configure Emotion? Did you use the template provided by MUI?
Molossus of EpirusOP
Oh no, where can I read about this?
I did not do any specific configuration to Emotion
And I did not use any template provided by MUI
Molossus of EpirusOP
Is it possible to even use MUI with app directory?
Asian black bear
@Molossus of Epirus It does work, but the integration is not super streamlined, and is not actually supported by the Emotion team
Basically you need to wrap your app with a context provider. Their example is pretty solid though: https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts
Molossus of EpirusOP
I see, is it possible to somehow opt out of the SSR behaviour and somehow solve the hydration issues in that way? I am quite short on time here..
Molossus of EpirusOP
@Asian black bear
Asian black bear
I am pretty sure you must put in the adapter, and in either case it is not very hard
Wrap your app in the root layout
@Molossus of Epirus I forgot these don't ping people
Molossus of EpirusOP
Currently transitioning to this example, my layout.js looks like this now:

import * as React from 'react';
import ThemeRegistry from '@/components/Theme/ThemeRegistry/ThemeRegistry';
import './globals.css'


export const metadata = {
  title: 'my page',
  description: 'page',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ThemeRegistry>{children}</ThemeRegistry>
      </body>
    </html>
  );
}
or .tsx rather
ok looks rad, are you still getting errors?
Molossus of EpirusOP
Gonna try it out in production in just a moment. One question however, would I need to specifiy "use client" for all components that use MUI stuff?
Asian black bear
yes, in my opinion even for stuff that does not generate an error about needing to
basically anything with html styled by emotion
Molossus of EpirusOP
👍
Asian black bear
since you mentioned being on a deadline, don't stress about it
I am porting a project where only MUI widgets use Emotion, and everything else is Tailwind
Molossus of EpirusOP
I see, thanks for you help! Will let you know how it goes when I put it to production. Good luck with your project 🙂
Molossus of EpirusOP
It did not solve the issue unfortunately 😦 Not sure what to do next...
Molossus of EpirusOP
The issue was actually an unsupported regex in safari, changing it solved the issue 😬
Answer