Theo's Typesafe Cult•2y ago

[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

barryOP•2y ago

Anyone else had problems with the Toaster causing hydration problems? Next app dir, v13.4.12 Removing toaster => no errors, annoying

Solution

barry•2y ago

Ok nevermind, putting the Toaster inside body fixes it I'm blind

Gaming

Programming

[SHADCN/UI] Toaster Hydration Issues...