Hydration failed: Did not expect server HTML to contain the text node " " in <div>.
Answered
Amorph posted this in #help-forum
AmorphOP
I've tried commenting out pieces one by one to see if children or one of the providers in my layout does this but i still get the error
Here is my source code:
https://github.com/IordanDenis/bestroll-ecommerce-admin
that's my root layout
Here is my source code:
https://github.com/IordanDenis/bestroll-ecommerce-admin
that's my root layout
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "../styles/globals.css";
import { ClerkProvider } from "@clerk/nextjs";
import { ModalProvider } from "@/providers/modal-provider";
import { ToasterProvider } from "@/providers/toast-provider";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Admin Dashboard",
description: "Admin Dashboard",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<html lang="en">
<body className={inter.className}>
<ToasterProvider />
<ModalProvider />
{children}
</body>
</html>
</ClerkProvider>
);
}45 Replies
AmorphOP
bump
AmorphOP
bump
Yakutian Laika
when do you have the problem, loading the first time when the user is not logged in, after logging in? ..
AmorphOP
it does not matter if the user is logged in or not, i get the hydration error both when im logged in and when i get the log in window
did you try that in guest mode? I mean browser guest mode without any extensions?
Yakutian Laika
I've cloned your repo and I set my Clerk env var but I can't do anything else because I don't have prisma set up, but the page loads when I access as a anon user...
AmorphOP
hmm interesting
i tried in guest mode and i don't get the error mode
so it's not the code but the extensions i have 🤔
yes, everything loads, that's not the issue, but whenever i refresh, navigate to other page this hydration error shows as a box in the bottom left of the screen
and if u open it it shows the previous screenshot i posted
but since it looks that it's coming from one of my extensions i shall ignore it
yeah @Amorph then ignore the error messages
you won't have that error messages in the production build
AmorphOP
alright
so if lets say i get the error messages in the production build then i should be worried? 😄
you won't get this error message in the production build I guess 🙂
just give it a try
npm run build & npm run startAmorphOP
i have the prod set up
and i do get some errors but only on the first load of the page from what i've noticed
are they the same errors you posted here?
AmorphOP
it looks like its still an hydration error
based on that link
no, not exact same error
but a general hydration error message
however, i think it shouldnt matter now but only when im done with proj and set all the prod keys etc
oh, yeah, but you don't get that error rectangle in the left bottom, right?
actually that's what I meant
AmorphOP
oh yep that part, nope i dont get the rectangle in left bottom
yeah, so regarding error messages in the console, we have no control unless users have their extension in their browser
to explain a bit, hydration error is happening because payload pre-rendered in the server is different from the one rendered in the client (affected by extension)
AmorphOP
do you know if all hydration errors are the same? as in, same as mine, you get the rectangle in the left bottom but you are able to navigate the app, or other hydration errors could not let you navigate at all the app if you don't fix it?
nope, hydration error NEVER block you from navigation
Answer
it's just error/warning about content mismatch (between server/client payload)
glad to help you!
mark solution if any of my answers helped you 🙂
AmorphOP
yup, doing it rn