functions cannot be passed directly to client components, inline function
Answered
! AlexNotTheLion posted this in #help-forum
I have a Navbar component, has "use server" at the top of the file, its being imported by the root layout in nextjs 14, but i keep getting
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
and i cant fathom why, attached is my codeAnswered by ! AlexNotTheLion
okay solved it, the "use server" actions requires i add
const supabase = createClient();
24 Replies
American Chinchilla
@! AlexNotTheLion did you solve it?
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
if you scroll down to 'client components' heading
if you scroll down to 'client components' heading
you will see a heading on how to do server action in client component
but if it a server component
it should work
but based on your error message
it seems like your component is a client component
hey nope not solved yet
its 100% a server component
American Chinchilla
On the top of the file there is no “use client”?
nope
ive tried adding "use server" but i get the same result
American Chinchilla
you only add "use server" for server actions
by default every component is a server component
what do you have in the top of your file
from lines 0-20
Its only being imported in the root layout as well
American Chinchilla
what version of next.js is this
just updated to the latest 14.2.3
using turbo pack
this is the full error in chrome :
okay solved it, the "use server" actions requires i add
const supabase = createClient();
Answer