useFormState type errors with v7

[benjick]

Hello

I've been using next-safe-action v6 for a while, and need to migrate to v7 to update to nextjs@14.2.8 and typescript@5.5.4.

But how can I use useFormState with next-safe-action v7? I've tried reading the docs about it (https://next-safe-action.dev/docs/migrations/v6-to-v7#support-stateful-actions-using-react-useactionstate-hook) but I can't figure it out.

Here's my action:

"use server";

import { z } from "zod";
import { zfd } from "zod-form-data";
import { action } from "~/lib/next-safe-action";

const schema = zfd.formData({
  name: zfd.text(z.string()),
  description: zfd.text(z.string()),
  currentUrl: zfd.text(z.string()).optional(),
});

export const createIssue = action
  .schema(schema)
  .stateAction<string | null>(async ({ parsedInput, ctx: { session } }) => {
    return "test"
  });

And here is how I'm trying to use it:

export function BugDialog(props: BugDialogProps) {
  const [state, dispatch] = useFormState(createIssue, null);
  return (
          <form action={dispatch}>
            // form stuff
          </form>
  );
}

And this works, I can see the action being called etc. But I keep getting this huge type error in VSCode:

No overload matches this call.
  Overload 1 of 2, '(action: (state: SafeActionResult<string, ZodEffects<ZodObject<{ name: ZodEffects<ZodString, string, string>; description: ZodEffects<ZodString, string, string>; currentUrl: ZodOptional<...>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, ... 4 more ..., object> | null) => SafeActionResult<...> | ... 1 more ... | null, initialState: SafeActionResult<...> | null, permalink?: string | undefined): [state: ...]', gave the following error.
    Argument of type 'SafeStateActionFn<string, ZodEffects<ZodObject<{ name: ZodEffects<ZodString, string, string>; description: ZodEffects<ZodString, string, string>; currentUrl: ZodOptional<...>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, readonly [], { ...; }, readonly [], string | n...' is not assignable to parameter of type '(state: SafeActionResult<string, ZodEffects<ZodObject<{ name: ZodEffects<ZodString, string, string>; description: ZodEffects<ZodString, string, string>; currentUrl: ZodOptional<...>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, ... 4 more ..., object> | null) => Safe...'.
      Target signature provides too few arguments. Expected 2 or more, but got 1.
  Overload 2 of 2, '(action: (state: SafeActionResult<string, ZodEffects<ZodObject<{ name: ZodEffects<ZodString, string, string>; description: ZodEffects<ZodString, string, string>; currentUrl: ZodOptional<...>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, ... 4 more ..., object> | null, payload: FormData | FormDataLikeInput) => SafeActionResult<...> | ... 1 more ... | null, initialState: SafeActionResult<...> | null, permalink?: string | undefined): [state: ...]', gave the following error.
    Argument of type 'SafeStateActionFn<string, ZodEffects<ZodObject<{ name: ZodEffects<ZodString, string, string>; description: ZodEffects<ZodString, string, string>; currentUrl: ZodOptional<...>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, readonly [], { ...; }, readonly [], string | n...' is not assignable to parameter of type '(state: SafeActionResult<string, ZodEffects<ZodObject<{ name: ZodEffects<ZodString, string, string>; description: ZodEffects<ZodString, string, string>; currentUrl: ZodOptional<...>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, ... 4 more ..., object> | null, payload...'.
      Types of parameters 'prevResult' and 'state' are incompatible.
        Type 'SafeActionResult<string, ZodEffects<ZodObject<{ name: ZodEffects<ZodString, string, string>; description: ZodEffects<ZodString, string, string>; currentUrl: ZodOptional<...>; }, UnknownKeysParam, ZodTypeAny, { ...; }, { ...; }>, { ...; }, FormData | FormDataLikeInput>, ... 4 more ..., object> | null' is not assignable to type '{ data?: string | null | undefined; serverError?: string | undefined; validationErrors?: { _errors?: string[] | undefined; name?: { _errors?: string[] | undefined; } | undefined; description?: { ...; } | undefined; currentUrl?: { ...; } | undefined; } | undefined; bindArgsValidationErrors?: readonly [] | undefined; }'.
          Type 'null' is not assignable to type '{ data?: string | null | undefined; serverError?: string | undefined; validationErrors?: { _errors?: string[] | undefined; name?: { _errors?: string[] | undefined; } | undefined; description?: { ...; } | undefined; currentUrl?: { ...; } | undefined; } | undefined; bindArgsValidationErrors?: readonly [] | undefined; }'.ts(2769)

[TheEdoRan]

Hi, the TS error should go away if you simply pass an empty object as the second parameter of useFormState. Safe action result is an object with optional properties; since you need to provide the initial state to useFormState, {} is all that's needed for the initial state:

export function BugDialog(props: BugDialogProps) {
- const [state, dispatch] = useFormState(createIssue, null);
+ const [state, dispatch] = useFormState(createIssue, {});
...