score:44

Accepted answer

I have been experiencing the same problem lately with NextJS and i am not sure if my observations are applicable to other libraries. I had been wrapping my components with an improper tag that is, NextJS is not comfortable having a p tag wrapping your divs, sections etc so it will yell "Hydration failed because the initial UI does not match what was rendered on the server". So I solved this problem by examining how my elements were wrapping each other. With material UI you would need to be cautious for example if you use a Typography component as a wrapper, the default value of the component prop is "p" so you will experience the error if you don't change the component value to something semantic. So in my own opinion based on my personal experience the problem is caused by improper arrangement of html elements and to solve the problem in the context of NextJS one will have to reevaluate how they are arranging their html element.

import Image from 'next/image'
/**
 * This might give that error
 */
export const IncorrectComponent = ()=>{
  return(
    <p>
      <div>This is not correct and should never be done because the p tag has been abused</div>
      <Image src='/vercel.svg' alt='' width='30' height='30'/>
    </p>
  )
}

/**
 * This will work
 */
export const CorrectComponent = ()=>{
  return(
    <div>
      <div>This is correct and should work because a div is really good for this task.</div>
      <Image src='/vercel.svg' alt='' width='30' height='30'/>
    </div>
  )
}

score:0

I had similar issues. Reverting back to a stable version of react worked the magic

Consider reverting back to React 17

Here is a github discussion (https://github.com/vercel/next.js/discussions/35773)

score:0

So mine is a NEXT JS app.

I am using the react-use-cart module and it seems it has issues with react @18.0.0.

I am not sure how this is possible but downgrading to react @17.0.2 removed my errors.

Previously I was using react @18.0.0

I simply ran npm uninstall react react-dom and installed versions @17.0.2.

Wahala, everything now works as expected.

score:0

If you're using NextJS and Material UI with emotion as the styling engine, then you may need to check the semantics of your components. You can find hints in the errors logged to the browser console.

Example: adding Box component inside Iconbutton will cause an error

There's no need to create a custom NextJS _document.js file because @emotion/react version 10 and above works with NextJS by default.

score:0

I had the same issue when tried to put a div inside Card Text of React-Bootstrap.

The error can be reproduced by:

import type { NextPage } from 'next'
import { Card } from 'react-bootstrap';
...
const testPage : NextPage = () => {
...
return (
...
<Card.Text>
    <div>It's an error</div>
</Card.Text>
...
)}

export default testPage

To fix it, i just removed the html tag.

I think that some react components doesn't accept html tags inside.

score:0

Importing and running some of the packages can cause this error too. For example, when I used Swiper.js package I encountered this problem. It's mostly because the package is using Window object somewhere.

Since it isn't a good practice to modify the content of the package itself, the best way to tackle such issues is to render the component only after the DOM is loaded. So you can try this.

const Index = () => {
  const [domLoaded, setDomLoaded] = useState(false);

  useEffect(() => {
    setDomLoaded(true);
  }, []);

  return (
    <>
      {domLoaded && (
        <Swiper>
          <div>Test</div>
        </Swiper>
      )}
    </>
  );
};

export default Index;

score:0

I had the same issue with Next.js and Faker.js, and i just use conditional rendering and it's solved. I think it happened because the values from faker.js changes twice when page first loading. Code below may help you.

`

    export default function Story() {
    const [avatar, setAvatar] = useState(null);
    const [name, setName] = useState(null);

    useEffect(() => {
    setAvatar(faker.image.avatar());
    setName(faker.name.findName());
    }, []);

    return (
    <>
      {avatar && name && (
      <div>
        <Image
          src={avatar}
          alt="Story Profile Picture"
          width={50}
          height={50}
      />
        <p>{name}</p>
      </div>
      )}
    </>
   );
}

`

score:0

You Can wrap your component that cause this error with Nossr from mui(material-ui)

import NoSsr from "@mui/material/NoSsr";

<NoSsr> {your contents} </NoSsr>

to get more info: https://mui.com/material-ui/react-no-ssr/

score:0

Make sure to wrap in Suspense the lazy modules you import.

In my case I imported

const Footer = React.lazy(() => import('../Footer/Index'));

but I was using it just like a normal module

<Footer />

I wrapped it in Suspense and the error was gone.

<Suspense fallback={<div>Loading...</div>}>
  <Footer />
</Suspense>

Bottom line

If this error is given to you on the home page, try to comment some of the components you use until you find where the error is coming from.

score:0

In my case, when I used reverse() function before mapping my list, I was getting a similar error.

score:0

If you are using nextjs , you can try official solutions here: https://nextjs.org/docs/messages/react-hydration-error

score:0

In my case, neither making the HTML more semantic nor modifying the _app.tsx to check if the window was loaded.

The only solution, for now, was to downgrade the React version and the React DOM.

I'm using NextJS.

I switched to version 17.0.2.

score:0

If you're using a table, you probably missed <tbody>

incorrect:

<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

correct:

<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
    </tr>
  </tbody>
</table>

score:1

it will work:

 function MyApp({ Component, pageProps }) {
      const [showing, setShowing] = useState(false);

      useEffect(() => {
        setShowing(true);
      }, []);
    
      if (!showing) {
        return null;
      }
    
      if (typeof window === 'undefined') {
        return <></>;
      } else {
        return (
           <RecoilRoot>
             <MainLayout>
                 <Component {...pageProps} />
              </MainLayout>
           </RecoilRoot>
        );
      }
    }

 export default MyApp;

here I used recoil for state managing.

score:1

Removing the <p> tag solved my similar problem with NEXTJS..

score:6

This solution work for me:

export default function MyApp({ Component, pageProps }: AppProps) {
  const [showChild, setShowChild] = useState(false);
  useEffect(() => {
    setShowChild(true);
  }, []);

  if (!showChild) {
    return null;
  }

  if (typeof window === 'undefined') {
    return <></>;
  } else {
    return (
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    );
  }
}

I also using NextJS, Redux Toolkit


Related Query

More Query from same tag