hydration error in next.js when using the div tag instead of the main tag #61275

nishant-k1 · 2024-01-28T01:50:24Z

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/charming-chihiro-vyhcff?file=%2Fapp%2Fpage.tsx%3A4%2C2

To Reproduce

The error that I get

To reproduce the issue below is the code that caused the error

import React from "react";
import Image from "next/image";

type Props = {};

const Testing = (props: Props) => {
  return (
    <div>
      <h1>Testing</h1>
    </div>
  );
};

export default Testing;

Below is the code that runs flawlessly

import React from "react";
import Image from "next/image";

type Props = {};

const Testing = (props: Props) => {
  return (
    <main>
      <h1>Testing</h1>
    </main>
  );
};

export default Testing;

Current vs. Expected behavior

You can see the only difference is the usage of the div tag instead of the main tag causing the hydration error.

The error can be reproduced only locally while using vs code. Weirdly, I'm unable to reproduce the error on CodeSandbox.
While going through the documentation I don't see an explanation related to the usage of semantic tags or anything related. It only mentions incorrect nesting of tags. Maybe I'm missing something?

Provide environment information

npm info using npm@9.6.4
npm info using node@v20.1.0
npm info using npm@9.6.4
npm info using node@v20.1.0
npm info ok 
npm info using npm@9.6.4
npm info using node@v20.1.0
npm info ok 

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Thu Nov  9 00:42:05 PST 2023; root:xnu-8020.240.18.705.10~1/RELEASE_ARM64_T6000
Binaries:
  Node: 20.1.0
  npm: 9.6.4
  Yarn: 4.0.2
  pnpm: 8.8.0
Relevant Packages:
  next: 14.1.1-canary.17 // Latest available version is detected (14.1.1-canary.17).
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A


npm info ok

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

The text was updated successfully, but these errors were encountered:

theStrangeAdventurer · 2024-01-31T09:19:43Z

I have same error, but with button in button (NextJS v13)

Minimal case is

const Page: NextPage = () => {
    return (
        <>
            <button ><button>test</button></button>
        </>
    );
};

I tried to add different keys, and use div between buttons like that

            <button><div><button>test2</button></div></button>

UPDATE

It's a strange (markup is same on client and server), but it turns out that my case is described in the documentation. https://nextjs.org/docs/messages/react-hydration-error#common-causes

davelin18yufan · 2024-02-05T12:27:37Z

Hey, this doesn't seem to be a significant issue. I forked your link, and initially, I encountered this error. However, after saving the file and letting the program restart once, everything worked fine. I guess it might be a version issue. The version of next in the yarn.lock file is 13.0.8-canary.0.

nishant-k1 · 2024-02-06T07:53:23Z

Hey, this doesn't seem to be a significant issue. I forked your link, and initially, I encountered this error. However, after saving the file and letting the program restart once, everything worked fine. I guess it might be a version issue. The version of next in the yarn.lock file is 13.0.8-canary.0.

Thanks @davelin18yufan and I appreciate your effort for taking a closer look at the issue. I was kind of forced to use 13.0.8-canary.0 to create the issue here on GitHub. (It's the protocol for raising the issue here) The error occurs on both the normal version and the canary version so it's not the version issue. Unfortunately, this doesn't seem significant but it took a lot of effort for me to debug and find the reason for the hydration issue in one of my big Projects. I was assuming the reason behind the hydration issue might be something else but I was quite surprised to find this reason which seems weird.

tj-dixon · 2024-06-25T14:38:00Z

This is a frequently occurring issue while using MUI components.

nishant-k1 added the bug Issue was opened via the bug report template. label Jan 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

hydration error in next.js when using the div tag instead of the main tag #61275

hydration error in next.js when using the div tag instead of the main tag #61275

hydration error in next.js when using the div tag instead of the main tag #61275

hydration error in next.js when using the div tag instead of the main tag #61275

Comments

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context