search

timolins / react-hot-toast

Smoking Hot React Notifications 🔥
https://react-hot-toast.com
MIT License
9.55k stars 313 forks source link

Keep getting `Did not expect server HTML to contain a <h1> in <div>.` on NextJS 13 #246

Closed gmwill934 closed 1 year ago

gmwill934 commented 1 year ago

Hey

Currently using Next JS 13.0.6 with the new app directory and keep getting this annoying error.

Did not expect server HTML to contain a <h1> in <div>.

I have added the Toaster component on my root layout

'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactNode } from 'react';
import './globals.css';
import { Toaster } from 'react-hot-toast';

type RootLayoutProps = { children: ReactNode };

const queryClient = new QueryClient();

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html>
      <QueryClientProvider client={queryClient}>
        <body>
          {children}
          <Toaster />
        </body>
      </QueryClientProvider>
    </html>
  );
}

Am I missing something?

Thanks

gmwill934 commented 1 year ago

Is Next JS not supported?

lelabo-m commented 1 year ago

I have the same issue right now. By curiosity, which version are you running ?

gmwill934 commented 1 year ago

latest 2.4.0

cksal0805 commented 1 year ago

Try this code

const Toaster = dynamic(
  async () => {
    const { Toaster } = await import("react-hot-toast");
    return Toaster;
  },
  {
    ssr: false,
  }
);
gmwill934 commented 1 year ago

thanks, that worked

deadcoder0904 commented 1 year ago

thanks, i just did that. here's a copy-paste from the dkms repo:

app/providers.tsx

'use client'

import dynamic from 'next/dynamic'

const Toaster = dynamic(
  async () => {
    const { Toaster: BaseToaster } = await import('react-hot-toast')
    return BaseToaster
  },
  {
    ssr: false,
  }
)

export const GlobalProviders = ({
  children,
}: {
  children: React.ReactNode
}) => (
  <>
    <Toaster />
    {children}
  </>
)

app/layout.tsx

import { Inter } from 'next/font/google'
import clsx from 'clsx'

import { GlobalProviders } from '@/app/providers'
import '@/app/styles/index.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'magic link using lucia auth',
  description:
    'a sample demo of magic link using lucia auth with drizzle & sqlite',
}

const RootLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <html lang="en">
      <body
        className={clsx(
          inter.className,
          'min-h-screen bg-gray-900 text-white p-4'
        )}
      >
        <GlobalProviders>{children}</GlobalProviders>
      </body>
    </html>
  )
}

export default RootLayout