Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

[niallam22]

I have created a server action to complete a POST checkout request. I use the server action in my client component, passing the product data to the action. I have declared the server action with use server but still get this error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

I have found this discussion #49625
which says it is not possible to use component props directly inside of the action so you have to pass the data into a hidden input and after do the logic inside of the action. However, I am not sure what this means or how to apply it.

Here is my code.

Server action:

'use server'

export async function postCheckout(items: Item[]) {
    const response = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/checkout`, {
      items: items.map((item) => ({
        productId: item.id,
        quantity: item.quantity,
      })),
    });
}

Client component:

"use client"

import axios from "axios";
import { postCheckout } from "@/actions/_actions";
import useCart from "@/hooks/use-cart";

const Summary: React.FC<SummaryProps> = () => {
  const items = useCart((state) => state.items);
  const onCheckout = async () => {
      const response = await postCheckout(items)
      window.location = response.data.url;
  };

  return (
      <Button onClick={onCheckout} disabled={items.length === 0} className="w-full mt-6">
        Checkout
      </Button>
  );
};

export default Summary;

[icyJoseph]

Is postCheckout being passed down from a Server Component to the Client Component?

Is the Client Component using the "use client" directive?

[niallam22]

Yes and yes. The _actions.ts file uses 'use server' and the summary component uses 'use client'. I have updated my initial post which makes that more clear.

[icyJoseph]

Ah, this is weird, you are importing postCheckout, from the actions into the client component, that should work fine 🤔 I am doing the exact same thing in another project, and it works. Could you share a link to the repository?

[niallam22]

Sure here it is - https://github.com/niallam22/ecommerce-store/tree/serverAction

summary component:
https://github.com/niallam22/ecommerce-store/blob/serverAction/app/(routes)/cart/components/summary.tsx

server action:
https://github.com/niallam22/ecommerce-store/blob/serverAction/actions/_actions.ts

The endpoint it is fetching from this repo:
https://github.com/niallam22/ecommerce-admin/blob/main/app/api/%5BstoreId%5D/checkout/route.ts

[Nikkakko]

i have same problem, did you find solution?

[niallam22]

no I didn't, please let me know if you do.

…

On Fri, 24 Nov 2023 at 05:48, Nika Ko ***@***.***> wrote: i got have same problem, did you find solution? — Reply to this email directly, view it on GitHub <#58720 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJP7WFUWHYCNMJURGTA7TU3YGAYL5AVCNFSM6AAAAAA7UHCUFCVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TMNJXGI2DE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[rferreira98]

im having this same issue