Passing server actions though layout.tsx throws error?
Answered
Siberian posted this in #help-forum
SiberianOP
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}
^^^^^^^^
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}
^^^^^^^^
Answered by Ray
The arguments and return value of Server Actions must be serializable by React.
8 Replies
The arguments and return value of Server Actions must be serializable by React.
Answer
SiberianOP
That did it! Thanks. It fails only if I try to return a function.
@Siberian That did it! Thanks. It fails only if I try to return a function.
cool, please mark solutions
SiberianOP
Did it! If you have any reading material on why the code above is not serializable that would also be really helpful
SiberianOP
You are an amazing person 😄 Ty