#Hydration Error: dispatchEvent

16 messages ยท Page 1 of 1 (latest)

old ferry
#

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 { 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>
  );
}```
boreal remnantBOT
#

๐Ÿ”Ž This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

๐Ÿ•ต๏ธ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

โœ… You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

obtuse crescent
old ferry
obtuse crescent
#

no, the browser

old ferry
#

got these warning

obtuse crescent
#

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

old ferry
#

oh okay i'll try to check again, sorry this is my first time using next.js

obtuse crescent
#

no worries, you're doing great!

old ferry
#

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

obtuse crescent
#

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

old ferry
#

ohh alright

#

the errors is gone! Been trying to figure it out the whole afternoon.
Thanks Dayo- ๐Ÿ™‡๐Ÿปโ€โ™‚๏ธ

boreal remnantBOT
#
โœ… Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1240702306484486265 message)