layout.tsx doesn't allow client components

Answered

Yacare Caiman posted this in #help-forum

Yacare CaimanOP

2024-04-01T14:39:55.000Z

I have a root layout.tsx

import { DashboardAppShell } from '@/components/DashboardAppShell'

export default function RootLayout(
    props: Readonly<{
        children: React.ReactNode
        params: { locale: string }
    }>
) {
    return (
        <html lang={props.params.locale}>
            <head>
                <ColorSchemeScript />
            </head>
            <body>
                <DashboardAppShell>{props.children}</DashboardAppShell>
            </body>
        </html>
    )
}

And a client component DashboardAppShell.tsx

'use-client'

import { ReactNode, useEffect } from 'react'

type DashboardAppShellProps = {
    children: ReactNode
}

export function DashboardAppShell(props: DashboardAppShellProps) {
    useEffect(() => {
        // Logic...
    }, [])

    return (
        <>
                  {/* Common styles */}
                  {props.children}
        </>
    )
}

However I get the following error from next:

./src/components/DashboardAppShell.tsx
Error: 
  Ã— You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

I did mark DashboardAppShell.tsx as use-client (even tried adding use-client to layout.tsx) but it still complains, why?

Answered by Clown

Its supposed to be "use client" not "use-client"

View full answer