Theo's Typesafe Cult•8mo ago

Server component rendered by client component as children prop throwing error

i'm trying to fetch some data from a server component (StatusImages) that is being rendered as the child of a client component (StatusBar) from within a server component (Manage) that is the child of a server page component. i'm getting the ReactServerComponentsError (pic) i'm confused because i thought server components can be rendered by client components (never actually tried though up till now) as long as they're the children of the client component, and both are imported into a server component. my setup checks all of this, yet i'm still getting the error. page.tsx: -> server Manage.tsx: -> server

<StatusBar> // client
    <StatusImages /> // server
</StatusBar>

<StatusBar> // client
    <StatusImages /> // server
</StatusBar>

i have taken a look at the files it's suggesting:
1. StatusImages is definitely not a client component, 2. index.ts is by nature not one 3. ImageEdit doesn't have anything to do with this whole tree. what am i doing wrong?

Rendering: Composition Patterns

Recommended patterns for using Server and Client Components.

1 Reply

beroer•8mo ago

i have since found out that if you use barrel imports (re-exporting default exports as named exports from an index.ts) you should make the distinction between client and server components by using client.ts and server.ts, because it's the import tree that mattered here, not the component tree.

Gaming

Programming

Server component rendered by client component as children prop throwing error