[SHADCN/UI] Toaster Hydration Issues...

import { Toaster } from '@/components/ui/toaster';
import './globals.css';
import { Raleway } from 'next/font/google';
import { ThemeProvider } from '@/components/theme-provider';

const raleway = Raleway({
subsets: ['latin'],
weight: '400',
display: 'swap',
});

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='dk' suppressHydrationWarning>
<body className={raleway.className}>
<ThemeProvider attribute='class' defaultTheme='system' enableSystem>
{children}
</ThemeProvider>
</body>
<Toaster />
</html>
);
}
import { Toaster } from '@/components/ui/toaster';
import './globals.css';
import { Raleway } from 'next/font/google';
import { ThemeProvider } from '@/components/theme-provider';

const raleway = Raleway({
subsets: ['latin'],
weight: '400',
display: 'swap',
});

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='dk' suppressHydrationWarning>
<body className={raleway.className}>
<ThemeProvider attribute='class' defaultTheme='system' enableSystem>
{children}
</ThemeProvider>
</body>
<Toaster />
</html>
);
}
Solution:
Ok nevermind, putting the Toaster inside body fixes it I'm blind
Jump to solution
2 Replies
barry
barry16mo ago
Anyone else had problems with the Toaster causing hydration problems? Next app dir, v13.4.12 Removing toaster => no errors, annoying
Solution
barry
barry16mo ago
Ok nevermind, putting the Toaster inside body fixes it I'm blind
Want results from more Discord servers?
Add your server