[BUG] `useAction.input`issue with zod-form-data

[armandabric]

Are you using the latest version of this library?

• I verified that the issue exists in the latest next-safe-action release

Is there an existing issue for this?

• I have searched the existing issues and found nothing that matches

Describe the bug

When using next-safe-action with zod-safe-action schema, the useAction(...).input type is not inferred correctly.

In the action body the input type is ok:

const schema = zfd.formData({
  bar: zfd.text(z.string().min(3).max(10)),
});

export const doSomethingWithZodFormData = actionClient
  .schema(schema)
  .action(async ({ parsedInput: { bar } }) => {
    // Here the `bar` input is a `string` as expected
    const baz: string = bar;

    return { /* ... */ };
  });

The issue is only with the hook:

const doSomethingWithZodFormActionAction = useAction(doSomethingWithZodFormData)

// With a schema made with zod-safe-action, the input type is not ok: `FormData | FormDataLikeInput`
const bar = doSomethingWithZodFormActionAction.input?.bar

The issue also present with the useAction(...).execute function.

Everything works correctly when using a zod schema.

Reproduction steps

In the linked reproduction sandbox, if you open the app/page.tsx file you will see two useAction usage: one with a zod schema, the other with a zod-safe-action schema. The second case trigger a TS error.

Expected behavior

As the input type is well inferred in the action, I'm expecting it to the be inferred when using the useAction hook.

Link to a minimal reproduction of the issue

https://codesandbox.io/p/devbox/epic-torvalds-vt88n4

Library version

7.10.3

Next.js version

15.1.7

Node.js version

20.9.0

Additional context

No response

[chungweileong94]

TLDR;
It's zod-form-data that need to fix its input type for zfd.formData().

It's because zfd.formData() is a Zod effect, where the input type will be inferred as FormData | FormDataLikeInput (https://github.com/airjp73/rvf/blob/d7f7e983f43c5938d48f99dd744827ce9e559b34/packages/zod-form-data/src/helpers.ts#L128), even though you can technically pass in an object thanks to zod-form-data (https://github.com/airjp73/rvf/blob/d7f7e983f43c5938d48f99dd744827ce9e559b34/packages/zod-form-data/src/helpers.ts#L194), but it might not always the case for other Zod effect use cases.

I was once supporting this in my server action library chungweileong94/server-act#35, but I found myself fighting against the types for this specific use-case (zod-form-data), so I ended up ditching it when I adopted standard schema chungweileong94/server-act#37.

[chungweileong94]

This should be fixed in the latest zod-form-data.

[TheEdoRan]

@chungweileong94 thanks for fixing this issue in zod-form-data!
@armandabric can you confirm that everything is working properly now?

[armandabric]

I just try again with zod-form-data@2.0.7, and the input object appear now:

But it's hardly usable with FormData & FormDataLikeInput in the union: we have exclude them before being able to use any attribute in the input.

Property 'mode' does not exist on type 'FormData | FormDataLikeInput | { mode: "group" | "split"; locale: "en" | "de" | "es" | "fr" | "nl" | "pt" | "it"; }'.
  Property 'mode' does not exist on type 'FormData'.ts(2339)

[chungweileong94]

But it's hardly usable yet with FormData & FormDataLikeInput in the union: we have exclude them before being able to use any attribute in the input.

Property 'mode' does not exist on type 'FormData | FormDataLikeInput | { mode: "group" | "split"; locale: "en" | "de" | "es" | "fr" | "nl" | "pt" | "it"; }'.
  Property 'mode' does not exist on type 'FormData'.ts(2339)

Ah, I see, but I don't think it's considered a bug in either zod-form-data or next-safe-action.
Fortunately, due to the fact that it can be both FormData or an object, you can perform a check (aka type guard) before accessing the object property.

if (!("entries" in selectDeliveryModeAction.input)) {
  // The input is object here
  console.log(selectDeliveryModeAction.input.mode);
}

You can also use this helper function to check if the input is a form data

type FormDataLikeInput = {
  [Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]>;
  entries(): IterableIterator<[string, FormDataEntryValue]>;
};

function isFormDataLikeInput<T>(
  input: FormData | FormDataLikeInput | T,
): input is FormData | FormDataLikeInput {
  return "entries" in input;
}

...

if (!isFormDataLikeInput(selectDeliveryModeAction.input)) {
  console.log(selectDeliveryModeAction.input.mode);
}

[chungweileong94]

I'm actually made a mistake on the helper function. This is the correct version.

function isFormDataLikeInput<T extends Record<string, unknown>>(
  input: FormData | FormDataLikeInput | T,
): input is FormData | FormDataLikeInput {
  return "entries" in input;
}

[adamlindqvist]

I just try again with zod-form-data@2.0.7, and the input object appear now:

But it's hardly usable with FormData & FormDataLikeInput in the union: we have exclude them before being able to use any attribute in the input.

Property 'mode' does not exist on type 'FormData | FormDataLikeInput | { mode: "group" | "split"; locale: "en" | "de" | "es" | "fr" | "nl" | "pt" | "it"; }'.
  Property 'mode' does not exist on type 'FormData'.ts(2339)

I agree. I'd say it impossible to use input since the types are very confusing.

Edit: To add some context of that I'm trying to achive

My expectation is to use the input to set the defaultValue of a input e.g. if there is a server/custom error in the action:

const { execute, input } = useAction(loginFormAction);

return (
    <form className={styles.Form} action={execute}>
       <input type="text" defaultValue={input.name} /> 
    </form>
)

I cant find any way to accomplish this at the moment.

[milad-mamandi]

any updates regarding this issue? i also cannot use input

[switz]

I'm running into issues with next-safe-action not "seeing" the FormData input - is anyone else having this problem? I've logged everything out and the FormData is right there, but for some reason, it's clashing with zod/v4 and zod-form-data.

Everything is just returning undefined. Maybe it's just an issue with zod-form-data and zod/v4?

[chungweileong94]

Maybe it's just an issue with zod-form-data and zod/v4?

The zod-form-data v3 package was recently released with support for zod v4. You can try it out and see if it works

https://github.com/airjp73/rvf/releases/tag/zfd-v3

[switz]

I'm using zfd 3, zod v4, and next-safe-action 8.

const updateDatasetSchema = zfd.formData({
  id: zfd.text(),
  name: zfd.text(
    z.string().min(1, 'Name is required').max(100, 'Name must be less than 100 characters')
  ),
  description: zfd.text().optional(),
  retentionDays: zfd.numeric().optional(),
  dataSource: zfd.text().optional(),
  dataSourceUpstreamId: zfd.text().optional(),
  dataSourceApiKey: zfd.text().optional(),
  dataSourceAppKey: zfd.text().optional(),
});

  const { execute, result } = useAction(action);
  console.log(result);

If description is empty string (this is nsa logging middleware):

Client input -> FormData {
  id: 'dataset_e70a9213fc7c17214db8eb9eec31',
  name: 'Datadog',
  description: '',
  ... //etc.
}

I get this error:

Object { validationErrors: {…} }
​
validationErrors: Object { description: {…} }
​​
description: Object { _errors: (1) […] }
​​​
_errors: Array [ "Invalid input: expected string, received undefined" ]

And I can't seem to figure out why

[chungweileong94]

@switz I never really use zfd.text() myself, so I didn't realize that is the case. I just checked the zod-form-data code, zfd.text() will try to transform the empty string into undefined every time, so doing zfd.text() actually means a different thing.

But I do notice that zed.text() doesn't get inferred as string | undefined, but it infer as string instead, which I will try to submit a PR to zod-form-data. In the meantime, you can workaround the issue by providing a schema to zfd.text()

zfd.text(z.string().optional())