Server Component imported into a This doesn't work: Client component and wrapped in a Client component

Question

I tried doing this in my Next 13 website but it's not working.

// This pattern doesn't work:

// Parent Client Component.
'use client';

import ClientComponent from './client-component'
import ServerComponent from './server-component'

export default function Page() {
return ( 
<ClientComponent>
<ServerComponent />
</ClientComponent> 
)
 }

Any reason why this doesn't work? It only works when I convert the parent component to a server component by removing the 'use client' directive.

Answer 1

As the docs https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props say you cannot pass server component in a client component

// Parent Client Component.
// You cannot pass server component inside a client component
use client;

import ClientComponent from './client-component'
import ServerComponent from './server-component'

export default function Page() {
 return ( 
  <ClientComponent>
    <ServerComponent />
  </ClientComponent> 
 )
}

As above code you provided says it is a "CLIENT COMPONENT" that's why this pattern doesn't work.