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
-
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