Functions cannot be passed directly to Client Components unless you explicitly expose it by marking
Unanswered
Miniature Pinscher posted this in #help-forum
Miniature PinscherOP
I am trying to pass a server component to a client component through props, as supported by the docs.
I get this error:
import Header from "./header";
import NavbarGameInfo from "./NavbarGameInfo";
export default async function ServerHeader(props) {
return (
<div>
{/* Header is a client component and navbargameinfo is server component */}
<Header NavbarGameInfo={NavbarGameInfo} />
</div>
);
}const NavbarGameInfo = async () => {
<div>
hello
</div>
};
export default NavbarGameInfo;I get this error:
Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". <... NavbarGameInfo={function}> ^^^^^^^^^^18 Replies
@Miniature Pinscher I am trying to pass a server component to a client component through props, as supported by the docs.
jsx
import Header from "./header";
import NavbarGameInfo from "./NavbarGameInfo";
export default async function ServerHeader(props) {
return (
<div>
{/* Header is a client component and navbargameinfo is server component */}
<Header NavbarGameInfo={NavbarGameInfo} />
</div>
);
}
jsx
const NavbarGameInfo = async () => {
<div>
hello
</div>
};
export default NavbarGameInfo;
I get this error:
`Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". <... NavbarGameInfo={function}> ^^^^^^^^^^`
you have to pass the component, not the function declaring the component. i know, that didn't make sense, but basically you have to do this
instead of
return <Component prop={<AnotherComponent />} />;instead of
return <Component prop={AnotherComponent} />;American Crow
^this
or
which is the same thing with the prob being called 'children'
or
<Header>
<NavbarGameInfo />
</Header>which is the same thing with the prob being called 'children'
Miniature PinscherOP
Now I got this error:
Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead.Miniature PinscherOP
return (
<Navbar
maxWidth="full"
className="rounded-none bg-[#263238] border-b"
>
{props.NavbarGameInfo}relevant part
you only use
NavbarGameInfo there right? nowhere else?it looks correct to me 
the error is probably somewhere else
Miniature PinscherOP
Yes, its all there is
export default function Header(props) {
console.log(props.NavbarGameInfo);
return (
<Navbar
maxWidth="full"
className="rounded-none bg-[#263238] border-b border-b-[#919EAB14] h-12"
classNames={{ wrapper: "pl-0 pr-2" }}
>
{props.NavbarGameInfo}
</Navbar>
);
}I've been pulling my hair over this for hours
could you make a minimal reproduction repository? remove all the private parts and simplify your code, but still keep the bug
i think i need a bigger overview of the code to tell whats wrong
because all of this looks good to me
Miniature PinscherOP
the navbargameinfo is a pretty big async server component that has many server functions that rely on imported server functions and exports some of them but I don't think that's why
welp it isn't, just tried with a very simple one
might be useful to add that the ServerHeader is rendered in the RootLayout