bug: layout.tsx - Error: Unsupported Server Component type: undefined

[Nishchit14]

I have some common dialogs which are accessible from anywhere from the app. Thus I need to place them at root layout.tsx. But It is giving this error.

layout.tsx

export default async function Layout({ children }: { children: any }) {
  return (
    <>
      {children}
      <CreateAssistantDialog.Root />
    </>
  )
}

[desko27]

Hi @Nishchit14, thanks for reporting! Clearly this is related to Next.js and RSC.

Someone mentioned this in the past, but the most hassle-free workaround I can think of by now is exporting the Root and the rest separately by means of destructuring:

'use client'

export const { Root, ...Dialog } = createCallable(...)

I tested this and it works, but I'd still like to find a way to keep the original setup as-is. Meanwhile I just added a note in the readme.

[Nishchit14]

@desko27 Thank you 🙏