Next.js Discord

Discord Forum

Hydration Error: dispatchEvent

Answered
West African Lion posted this in #help-forum
Open in Discord
Avatar
West African LionOP
Hello, I'm trying to get rid of Hydration keep coming out of my screen saying dispatchEvent. At first it was having div in html but i have resolved that and then dispatch error shows up. Below is the code for it which a footer in layout file.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Student Information Zone",
  description: "Testing",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        {/* Add metadata and other head elements here if needed */}
      </head>
      <body className={inter.className}>
        {children}
        <footer className="footer p-10 bg-base-200 text-base-content">
          <aside>
            <p>CampuSphere Ltd.<br />Providing reliable system since 2000.</p>
          </aside>
          <nav>
            <h6 className="footer-title">Company</h6>
            <a className="link link-hover">About us</a>
            <a className="link link-hover">Contact</a>
          </nav>
          <nav>
            <h6 className="footer-title">Legal</h6>
            <a className="link link-hover">Terms of use</a>
            <a className="link link-hover">Privacy policy</a>
          </nav>
        </footer>
      </body>
    </html>
  );
}
Image
Answered by Dayo
it's only the root layout that should contain the html and body tags. every other nested layout is pretty much a regular page. get rid of the html x body tags
View full answer

14 Replies

Avatar
@Dayo can you check the error in the console, you should be able to get more information there
Avatar
West African LionOP
is the console the vsCode terminal?
Avatar
Dayo
no, the browser
Avatar
West African LionOP
got these warning
Image
Image
Image
Avatar
Dayo
the error says you're rendering more than one instance of html and html cannot be a child of body. you need to investigate where you're doing this in your code
Avatar
West African LionOP
oh okay i'll try to check again, sorry this is my first time using next.js
Avatar
Dayo
no worries, you're doing great!
Avatar
West African LionOP
thanks- i think i know the problem now i have a folder which has another layout file which contain the header, doing that because im trying to make a dashboard page which will show the header after signing in. What is the solution i should use for this
Image
This is the header layout in the main folder
Image
Avatar
Dayo
it's only the root layout that should contain the html and body tags. every other nested layout is pretty much a regular page. get rid of the html x body tags
Answer
Avatar
West African LionOP
ohh alright
the errors is gone! Been trying to figure it out the whole afternoon.
Thanks Dayo- 🙇🏻‍♂️