Next.js Discord

Discord Forum

REPOST:Error: async/await is not yet supported in Client Components, only Server Components...

Answered
dank() posted this in #help-forum
Open in Discord
dank()OP
why is my SideBarLinks component throwing that error? this is how my components are structured and laid out(Only the relevant code) https://codesandbox.io/p/sandbox/distracted-star-98y57h?file=%2Fapp%2Fcontent%2Fcomponents%2FsideBar%2FSideBarSegments.tsx%3A50%2C31
layout.tsx //parent RSC
<ClientComponent>//index.tsx(sideBar)
  <ServerComponent>//sideBarContent
     <ClientComponent>//sideBarSegments
        <ServerComponent>//SideBarLinks <------
        </ServerComponent>
     </ClientComponent>
  </ServerComponent>
</ClientComponent>

BTW it throws a different error on the sandbox env, not sure why.
Answered by aardani
if you want to not opt-into client components, you need to expose a property that you can pass down from a server component.
View full answer

39 Replies

aardani
next.js doesnt work on codesandbox for some reason
dank()OP
that sucks
aardani
Have you tried reproducing in a minimal repo?
dank()OP
I'm gonna do that now, thought I'd make it in a sandbox and it would be more or less the same
aardani
remove async
dank()OP
yes that fixes it but I need it to be async
why can't I use async here?
aardani
your SidebarLinks is not a server component
SideBarLinks inside SideBarSegments is a client component since SideBarSegments has use client
aardani
if you want to not opt-into client components, you need to expose a property that you can pass down from a server component.
Answer
I thought it was as simple as
but if you pass a server component into a client comp then it's treated as a client com?
damn
aardani
"use client"

export function ClientComps({ children, foo, bar})

// Server component (page.tsx/layout.tsx)

return(
<ClientComps
  foo={<ServerComp2 />}
  bar={<ServerComp3 />}
>
  <ServerComp1 />
</ClientComps>
)
dank()OP
I misunderstood it
pass it as children prop?
aardani
pass it as any prop is fine
dank()OP
but why is ServerComp1 not passed as a prop
aardani
incorrect, servercomp1 is pased as a prop
dank()OP
child?
okay
aardani
children to be exact
dank()OP
what did I do wrong?
aardani
importing server comp into a client comp
dank()OP
okay okay I'm getting it
I got confused
@aardani so I should pass SideBarLinks into ProfileSegment in the SideBarContent right
but that also produces that error
it feels straightforward but it's not
it worked thanks so much I get it now, I really appreciate it!
saved my life
aardani
dont forget to mark the most helpful message as answer
dank()OP
okay lemme see
do you mark with just a reaction?
Original message was deleted
aardani
.