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

[BrunoQuaresma]

I have a page with a server action but I'm getting the following error every time I try to submit the form:

Error

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

page.tsx

import config from "@/config";
import { findResource } from "../_utils";
import { redirect } from "next/navigation";

export default async function New({
  params,
}: {
  params: { resourceId: string };
}) {
  const resource = findResource(config, params.resourceId);

  const formFields = resource.fields.filter((field) => {
    return field.id !== resource.primaryKey;
  });

  async function create(data: FormData) {
    "use server";
    if (resource.create) {
      const item = await resource.create({ name: "Some", email: "Other" });
      redirect(`/resources/${resource.id}/${item.id}`);
    }
  }

  return (
    <main>
      <h1>New</h1>
      <form action={create}>
        {formFields.map((field) => (
          <div key={field.id}>
            <label htmlFor="">{field.name}</label>
            <input type="text" name={field.id} />
          </div>
        ))}
        <button type="submit">Create</button>
      </form>
    </main>
  );
}

Version is 13.4.1

[BrunoQuaresma]

Found the answer, looks like it is not possible to use component props directly inside of the action so I had to pass the ID into a hidden input and after do the logic inside of the action. Here is what the final code looks like:

import config from "@/config";
import { findResource } from "../utils";
import { Resource, ResourceValue } from "@/core";
import { redirect } from "next/navigation";

export default async function New({
  params,
}: {
  params: { resourceId: string };
}) {
  const resource = findResource(config, params.resourceId);

  return (
    <main>
      <h1>New</h1>
      <Form resource={resource} />
    </main>
  );
}

const Form = ({ resource }: { resource: Resource }) => {
  const formFields = resource.fields.filter((field) => {
    return field.id !== resource.primaryKey;
  });

  async function create(formData: FormData) {
    "use server";
    const resourceId = formData.get("resourceId") as string;
    const resource = findResource(config, resourceId);
    if (resource.create) {
      const item = await resource.create(
        Object.fromEntries(formData.entries()) as ResourceValue
      );
      redirect(`/resources/${resource.id}/${item[resource.primaryKey]}`);
    }
  }

  return (
    <form action={create}>
      {formFields.map((field) => (
        <div key={field.id}>
          <label htmlFor="">{field.name}</label>
          <input type="text" name={field.id} />
          <input type="hidden" name="resourceId" value={resource.id} />
        </div>
      ))}
      <button type="submit">Create</button>
    </form>
  );
};

[merveillevaneck]

This is 100% correct. The moment you take something that runs client side (a variable, function or state) and you make use of it in your "use server" action, you invalidate the request by using something that is not serializable. at least this is as far as the docs explain it. Although one thing I can not seem to understand is why "passing to a client" is happening here. as far as i know in NextJS 13 all component are SSR only unless otherwise specified, no?

[BrunoQuaresma]

as far as i know in NextJS 13 all component are SSR only unless otherwise specified, no?

You are probably right. The error was also not very clear to me.

[ansh]

This is the correct answer. I was trying to use the slug of the page as a value within the server action.

[nikolailehbrink]

HI @BrunoQuaresma, I just wanted to give an alternative solution to the problem. I faced a very similiar issue today and now I figured it out. So you are taking the route with a hidden input field. I really didn't want to add hidden fields in order to call a function with some params as a server actions, so I just found the following in the React Documentation:

In lieu of using hidden form fields to provide data to the <form>’s action, you can call the bind method to supply it with extra arguments. This will bind a new argument (productId) to the function in addition to the formData that is passed as a argument to the function.

import { updateCart } from './lib.js';

function AddToCart({productId}) {
  async function addToCart(productId, formData) {
    "use server";
    await updateCart(productId)
  }
  const addProductToCart = addToCart.bind(null, productId);
  return (
    <form action={addProductToCart}>
      <button type="submit">Add to Cart</button>
    </form>
  );
}

That for me works and I suspect you can do the following:

const Form = ({ resource }: { resource: Resource }) => {
  const formFields = resource.fields.filter((field) => {
    return field.id !== resource.primaryKey;
  });

  async function create(resourceId, formData: FormData) {
    "use server";
    const resource = findResource(config, resourceId);
    if (resource.create) {
      const item = await resource.create(
        Object.fromEntries(formData.entries()) as ResourceValue
      );
      redirect(`/resources/${resource.id}/${item[resource.primaryKey]}`);
    }
  }

  const createForm = create.bind(null, resource.id);

  return (
    <form action={createForm}>
      {formFields.map((field) => (
        <div key={field.id}>
          <label htmlFor="">{field.name}</label>
          {/* hidden field not needed anymore */}          
          <input type="text" name={field.id} />
        </div>
      ))}
      <button type="submit">Create</button>
    </form>
  );
};

[gutrapp]

@BrunoQuaresma You should consider either re-opening this issue, because I came across the same thing, and I don't understand where the "Client Component" is, because none of my components are client, so technically speaking, I should be getting error, so I might just be an actual bug. Or maybe I'm just incorrect, and you've found a reason for it to think that the component is client, if so, could you help me understand it?

[atomicleopard]

I have come across this as well in the context of no client components, it looks to me like a bug, at the very least the error reporting is very misleading.

Minimum Reproduction 1

'use server'
import { ReactElement } from 'react'

const handleSubmit = async () => {
  'use server'
}
export default async function Page(): Promise<ReactElement> {
  return (
    <form action={handleSubmit}>
      <button>Submit</button>
    </form>
  )
}

Minimum Reproduction 2

'use server'
import { ReactElement } from 'react'

export default async function Page(): Promise<ReactElement> {
  const handleSubmit = async () => {
    'use server'
  }
  return (
    <form action={handleSubmit}>
      <button>Submit</button>
    </form>
  )
}

Both report the below.

Unhandled Runtime Error
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <form action={function} children=...>

Resolution 1

I was able to fix this by exporting the function, however I was unable to export it directly 😕

'use server'
import React, { type ReactElement } from 'react'

const handleSubmit = async () => {
  'use server'
}

export default async function Page(): Promise<ReactElement> {
  return (
    <form action={handleSubmit}>
      <button>Submit</button>
    </form>
  )
}
export { handleSubmit }

Resolution 2

Omit the page level "use server" directive

import React, { type ReactElement } from 'react'

const handleSubmit = async () => {
  'use server'
}

export default async function Page(): Promise<ReactElement> {
  return (
    <form action={handleSubmit}>
      <button>Submit</button>
    </form>
  )
}

Hopefully this helps anyone finding this (@gutrapp if you still face this)

[crissdev]

I'm facing the same issue if I try to use the props inside the RSC. I managed to work around it by extracting the server action and children to a separate component. Without props required to the RSC page, I don't get this error.

Here's what worked for me:

interface ProfilePageProps {
    params: { id: string }
}

export default async function ProfilePage(props: ProfilePageProps) {
   const profile = await api.getProfileData();
   return <Inner id={props.params.id} initialData={profile} />
}

export default async function Inner(props: {id: string; initialData: UserProfile }) {
  async function save(formData: FormData) {
     'use server';
     
     // ....
     // You can use props.id here 
 }
 return <div>{'It works'}</div>
}

[alijawad2230]

hello . Resolution 2 worked . thanks man. i just remove "use server" from top of the page . and it still run on server.

so yeah its a bug

[cosmemilton]

I would like to register a problem I had with the same message, however, in my case, some functions within the server actions worked and others did not. I realized it was because of the Blob fields:

I converted with JSON and will treat Blobs more specifically.

const result: QueryResult<T> = JSON.parse(JSON.stringify(con)) as any;