Cannot pass children to a client component from server component

Unanswered

American black bear posted this in #help-forum

American black bearOP

2024-01-15T12:59:16.000Z

I have a layout which renders in server side. I also have a context component which is rendering in client side. I want to pass the children node of layout to the context component. But nextjs 14 throws an error since children (reactnode) is not serializable. Therefore, I cannot pass it to the context componrnt.
What's the solution?
I'm using nextjs 14 with next auth session context.
Error: "Only plain objects ... can be passed to client compo from server compo. Classes or null prototypes are not allowed."

Code:

  export async function Layout({children}){
    //...
    return <SessionContext session={session}>{children}</SessionContext>
  }

What I tried:
I tried making layout to be client rendering and retrieve session from server action or api. It threw another error saying that app directory must be binded or something. I assumed that layout should be server rendering (I might be wrong).

Any help would be great. Thanks.

28 Replies

@American black bear I have a layout which renders in server side. I also have a context component which is rendering in client side. I want to pass the children node of layout to the context component. But nextjs 14 throws an error since children (reactnode) is not serializable. Therefore, I cannot pass it to the context componrnt. What's the solution? I'm using nextjs 14 with next auth session context. Error: "Only plain objects ... can be passed to client compo from server compo. Classes or null prototypes are not allowed." Code: tsx export async function Layout({children}){ //... return <SessionContext session={session}>{children}</SessionContext> } What I tried: I tried making layout to be client rendering and retrieve session from server action or api. It threw another error saying that app directory must be binded or something. I assumed that layout should be server rendering (I might be wrong). Any help would be great. Thanks.

Ray

2024-01-15T13:02:41.000Z

could you show the code on SessionContext?

American black bearOP

2024-01-15T13:04:36.000Z

It's just a context imported from next-auth but turned it into client rendering like this: (since context isn't available in server side)

"use client"
import {SessionProvider} from "next-auth"
export SessionProvider;

@American black bear It's just a context imported from next-auth but turned it into client rendering like this: (since context isn't available in server side) tsx "use client" import {SessionProvider} from "next-auth" export SessionProvider;

Ray

2024-01-15T13:05:34.000Z

try this

export default function SessionContext({children}) {
  const session = ...
  return <SessionProvider session={session}>{children}</SessionProvider/>
}

Eric Burel

2024-01-15T13:09:17.000Z

indeed the problem is your session not the children object

joulev

2024-01-15T13:12:25.000Z

Nextjs needs to integrate a transformer like superjson

Sessions usually have a Date object or undefined values which are not serialisable

Eric Burel

2024-01-15T13:14:50.000Z

They had the idea of a shared context they called "server context" (name which I used for another purpose too because it's dead ambiguous) understood as a shared context but it has been dropped atm

for now I think you have to come up with smth more manual

I wouldn't be super confident with non serializable values being passed around though it tingles my security breach 6th sense

Dates are serializable just annoying to deserialize

joulev

2024-01-15T13:18:26.000Z

Yeah serialising any value is a very dangerous task

But many serialisable values like Date or undefined, which are very common, are not allowed by nextjs unfortunately

@Ray try this tsx export default function SessionContext({children}) { const session = ... return <SessionProvider session={session}>{children}</SessionProvider/> }

American black bearOP

2024-01-15T14:42:14.000Z

I have tried it too.

@Eric Burel indeed the problem is your session not the children object