#Passing server actions though layout.tsx throws error?

10 messages · Page 1 of 1 (latest)

jagged wing
#

Hey, so basically I have the following structure

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import Header from "@/components/Header";
import checkoutService from '@/services/checkout';
import { Checkout } from '@/types/Checkout';

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
title: 'Cotton Castle',
description: 'Need something to stand out at the next joust? Cotton Castle has you covered.',
}

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {

async function createCheckout(checkout: Checkout) {
'use server';

return () => null;

}

return (
<html lang="en">
<head>
</head>
<body className={inter.className}>
<Header createCheckout={createCheckout}/>
{children}
</body>
</html>
)
}

Header.tsx

const Header: React.FC<HeaderProps> = ({createCheckout}) => {
const pathname = usePathname();

const isActive = (_pathname: string) => {
    return pathname === _pathname;
}

useEffect(() => {
    let resp = createCheckout({} as any);
}, []);

...

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

jolly loomBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

shrewd narwhal
#

The arguments and return value of Server Actions must be serializable by React.

jagged wing
#

That did it! Thanks. It fails only if I try to return a function.

shrewd narwhal
jolly loomBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1183784833600725022 message)

jagged wing
#

Did it! If you have any reading material on why the code above is not serializable that would also be really helpful

shrewd narwhal
#

here you go