facing "Hydration failed" issue when i add <Toaster/> in my app/layout.js page in Next.js (14.2.0-canary.33) #3070
abhishek9473
started this conversation in
General
Replies: 1 comment 1 reply
-
|
I also facing the same issue |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
make sure when you use nested layout inside main layout. in layout return function, use only |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
when i use
<Toaster/>in app/layout.js page it show me hydration errori mention the file below
error show - Expected server HTML to contain a matching
<div>in<body>.app/layout.js file -
import { Inter } from "next/font/google";
import "./globals.css";
import ReactQueryClientProvider from "@/providers/ReactQueryClientProvider";
import { Toaster } from "@/components/ui/toaster";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "ResumeFits",
description: "resumefits homepage",
};
export default function RootLayout({ children }) {
return (
<html lang="en"><ReactQueryClientProvider><body className={inter.className}>{children}
<Toaster/></body></ReactQueryClientProvider></html>);
}
Beta Was this translation helpful? Give feedback.
All reactions