[Solved] Error: Functions are not valid as a child of Client Components.

[ADTC]

I copied this example (Add a dismiss button to all toasts using ToastBar) from the docs. However, upon page reload, I encountered this error:

Uncaught Error: Functions are not valid as a child of Client Components. This may happen if you return
children instead of <children /> from render. Or maybe you meant to call this function rather than return it.
  <... position=... containerClassName=... toastOptions=... children={function children}>

Cause: I was constructing the <Toaster> and (t) => <ToastBar toast={t}> inside an RSC (React Server Component).

Reason: Even if <Toaster> itself is a client component, the rules of RSC state that children of a client component can be server components. The function is treated as a server component, which causes the error because functions cannot be streamed from the server to the client as children of client components.

Solution: Move everything (<Toaster> and (t) => <ToastBar toast={t}>) into a separate client component and then use the client component inside the parent RSC.

Client Component MyToaster.tsx/jsx:

'use client'

import { ToastBar, Toaster } from 'react-hot-toast'

export default function MyToaster() {
  return (
    <Toaster ... >
      {(t) => <ToastBar toast={t}> ... </ToastBar>}
    </Toaster>
  )
}

RSC (React Server Component):

import MyToaster from './MyToaster'
...
<MyToaster />