Did not expect server HTML to contain a <div> in <div>.

[zarghamkhandev]

I am getting this warning on client side, probably some react hydration issue. searched for a while everywhere but could not find any solution. Would be nice you address this issue.

[benawad]

I'm not sure what the fix is

[zarghamkhandev]

if we put inside NextLink this warning goes away. not sure why is this.

[AaronMcCloskey]

I am by no means an expert in Next.js, I'm only 4 hours through the video but I think it has something to do with the structure of the content, and the contents therein between what gets rendered SSR to what gets rendered client-side.

It may not be in the same file, as you didn't mention it, but I was getting it in NavBar.tsx

Instead of

 if (fetching) {
    // user not logged in
  } else if (!data?.me) {

with

if (fetching || !data?.me) {

Where, initially, when the query is fetching, it is returning null for body. With the update, that is no longer the case.

So, without that change, I think Next is surprised, that when the query is no longer fetching, that instead of a div with no children, it's now a div with children.

Hence the error

Did not expect server HTML to contain a

in

.

[k2glyph]

Thanks @AaronMcCloskey. I was also getting same issue

[ilovekobe2022]

I found a method to solve this issue.
here is my code before:

<NextLink href="/create-post"> <Link >create post</Link> </NextLink>

We know NextLink will cause the hydration issue.
After I change the code like this:

<Link as={NextLink} href="/create-post">create post</Link>

the hydration issue is solved.

I found the method from here:
chakra-ui/chakra-ui#7090