Next.js Discord

Discord Forum

Why I'm getting Hydration Errors?

Answered
Seppala Siberian Sleddog posted this in #help-forum
Open in Discord
Seppala Siberian SleddogOP
I'm getting Hydration errors whenver I use loading.tsx page or the Suspense component.
This is the error message 
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

// loading.tsx
import React, { FC } from 'react';

export interface LoadingProps {}

const Loading: FC<LoadingProps> = ({}) => {
  return <>Page is Loading....</>;
};

export default Loading;


// page.tsx

import { Box } from '@mui/material';
import H1 from '@/components/Typography/H1';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import axios from 'axios';

export default async function SuccessPage() {
  await axios.get('https://04341795-4db7-4fa0-9566-7d2dfd7f7ba4.mock.pstmn.io/fence/boundaryCheck');

  return (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="center"
      flexDirection="column"
      height="100vh"
      gap={2}
    >
      <CheckCircleOutlineIcon
        color="success"
        sx={{
          height: 100,
          width: 100,
        }}
      />
      <H1>Payment Verified Successfully</H1>
    </Box>
  );
}
Answered by Tramp ant
maybe this can help:

https://mui.com/material-ui/integrations/nextjs/
View full answer

29 Replies

Seppala Siberian SleddogOP
Okay, I will try that
@B33fb0n3 inside your loading.tsx replace the fragment with any html tag. That can be a div, a p, or any other html tag
Seppala Siberian SleddogOP
I changed it to a div and still the same issue
Seppala Siberian SleddogOP
After the load ends?
This is before
and this is after
@Seppala Siberian Sleddog After the load ends?
B33fb0n3
oh I mean inside your code (and 2 levels of nesting pls), not the actual page 🙂
Seppala Siberian SleddogOP
I'm using a layout.tsx
I already shared the code in the question description
this is the layout.tsx file
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/welab.svg" />
      </head>
      <ThemeProvider>
        <MUIXProvider />
        <body className={inter.className} style={{ background: '#F7F5F2' }}>
          {children}
          <ReduxProvider>
            <ReduxFlashMessage />
          </ReduxProvider>
        </body>
      </ThemeProvider>
    </html>
  );
}
@Seppala Siberian Sleddog this is the layout.tsx file tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <head> <link rel="icon" href="/welab.svg" /> </head> <ThemeProvider> <MUIXProvider /> <body className={inter.className} style={{ background: '#F7F5F2' }}> {children} <ReduxProvider> <ReduxFlashMessage /> </ReduxProvider> </body> </ThemeProvider> </html> ); }
B33fb0n3
can you change it like that and try:
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/welab.svg" />
      </head>
      <ThemeProvider>
        <MUIXProvider />
        <body className={inter.className} style={{ background: '#F7F5F2' }}>
          <div>
            {children}
            <ReduxProvider>
              <ReduxFlashMessage />
            </ReduxProvider>
          </div>
        </body>
      </ThemeProvider>
    </html>
  );
}
Tramp ant
Where do you call <LoadingPage /> and <SuccessPage />?
it can be some conditional rendering triggering this error
Seppala Siberian SleddogOP
The folder structure is as follows
app > layout.tsx
app > loading.tsx
app > success > page.tsx
@Seppala Siberian Sleddog this is the layout.tsx file tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <head> <link rel="icon" href="/welab.svg" /> </head> <ThemeProvider> <MUIXProvider /> <body className={inter.className} style={{ background: '#F7F5F2' }}> {children} <ReduxProvider> <ReduxFlashMessage /> </ReduxProvider> </body> </ThemeProvider> </html> ); }
B33fb0n3
can you remove the head tag and use export const metadata = {...} for the favicon?

Also move the Provider into the body tag and not outside from it. After that it shoud look like this:
export const metadata = {
        icons: [iconUrl], // replace iconUrl with the actually url

/* see more here: https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata */
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
       <body className={inter.className} style={{ background: '#F7F5F2' }}>
          <ThemeProvider>
            <MUIXProvider />
            {children}
            <ReduxProvider>
              <ReduxFlashMessage />
            </ReduxProvider>
          </ThemeProvider>
       </body>
    </html>
  );
}
Seppala Siberian SleddogOP
I have tried that once Again it didn't work, I have tried to add only a div in the page.tsx file it worked but once I add the Box element or any kind of element from MUI it never works even though that MUI renders a div as well
Seppala Siberian SleddogOP
I can't because It's for an already built in system
And I kinda of like MUI because it's rich on features that speed up the development time once you override thier theme
B33fb0n3
I guess I can't help you right now. I am sorry
Seppala Siberian SleddogOP
thanks man, no worries
Tramp ant
do you installed @emotion/cache alongside with mui material for nextjs?
Tramp ant
maybe this can help:

https://mui.com/material-ui/integrations/nextjs/
Answer
@Tramp ant do you installed @emotion/cache alongside with mui material for nextjs?
Seppala Siberian SleddogOP
thanks, I'll look into it
@Tramp ant do you installed @emotion/cache alongside with mui material for nextjs?
Seppala Siberian SleddogOP
Actullay this solved the issue thanks