Server component as client component's children prop
Unanswered
Asian black bear posted this in #help-forum
Asian black bearOP
i'm trying to fetch some data from a server component (
i'm getting the
i'm confused because [i thought server components can be rendered by client components](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-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.
i have taken a look at the files it's suggesting:
1.
2.
3.
what am i doing wrong?
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](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-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: -> serverManage.tsx: -> server<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 one3.
ImageEdit doesn't have anything to do with this whole tree.what am i doing wrong?
15 Replies
@Asian black bear 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](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-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
tsx
<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?
ImageEdit probably imported something from that barrel file which in turn imported the must-be-server-component StatusImages. So if ImageEdit or anything that imports it is a client component, it is not allowed
The server-client component relation concerns the import tree not the React tree
@joulev ImageEdit probably imported something from that barrel file which in turn imported the must-be-server-component StatusImages. So if ImageEdit or anything that imports it is a client component, it is not allowed
Asian black bearOP
ImageEdit is a client component. nothing that imports ImageEdit upwards is a client component.
so why that part in the documentation, i don't understand.
so why that part in the documentation, i don't understand.
sorry, it is.
@Asian black bear ImageEdit is a client component. nothing that imports ImageEdit upwards is a client component.
so why that part in the documentation, i don't understand.
Then
ImageEdit <- client component
imports index.ts
imports StatusImages <- server component
Not allowed
ImageEdit <- client component
imports index.ts
imports StatusImages <- server component
Not allowed
Asian black bearOP
but what does ImageEdit have to do with that tree? i don't get it.
As I said, the error doesn’t concern the react tree, but the import tree
Asian black bearOP
so if i wasn't using an index, there wouldn't be any relation?
@joulev Then
ImageEdit <- client component
imports index.ts
imports StatusImages <- server component
Not allowed
By this, you are telling the bundler to import StatusImages logic into ImageEdit (despite you not using StatusImages there), which is not allowed
@Asian black bear so if i wasn't using an index, there wouldn't be any relation?
Yes. If you just import from the original file directly without barrel files then it should work
Asian black bearOP
excellent, i'll try it out, thanks a lot, i didn't know this.
i used an index for cleaner imports of multiple files from the same place, but if it messes things up like this, i might have to revert everything.
Yeah I use barrel imports a lot too, but note that you should have a separate barrel file for client and server components
Like instead of index.ts you could have server.ts for things that must be server components and client.ts for things that can be either
Asian black bearOP
i didn't even know they were called barrel imports. 😄 okay, makes sense. it's an extra step when you can refactor something to a server component or the other way around, but necessary for those clean imports.
thanks for the heads up!
thanks for the heads up!