Type Error in useFormStatus

[gleaming jungle]

//actions.ts
export type FormState = {
    success: string | undefined
    errors: {
        message?: string | undefined
    }
}

export const deleteEducation = async (previousState: FormState, formData: FormData) => {
    console.log(formData)
    try {
        const session = await auth()
        if (!session) {
            return {
                success: undefined,
                errors: {
                    message: 'Not authenticated',
                },
            }
        }

        const id = formData.get('id')
        console.log(id)
        if (!id) {
            return {
                success: undefined,
                errors: {
                    message: 'Failed to delete education record',
                },
            }
        }
        const result = await prisma.education.delete({
            where: { id: String(id) },
        })

        revalidatePath('/intern/profile')
        if (result) {
            return {
                success: 'Education record deleted successfully',
                errors: {
                    message: undefined,
                },
            }
        }
    } catch (e) {
        console.log(e)
        return null
    }
}

//DeleteEducation.tsx
import { deleteEducation, FormState } from '@/lib/actions'
const initialState = {
    success: '',
    errors: {
        message: '',
    },
} as FormState
export default function DeleteEducation({ id, institution, major, startDate, endDate, honors }: DeleteEducationProps) {
    unstable_noStore()
    const [formState, removeEducationRecord] = useFormState(deleteEducation, initialState)

[twilit sable]

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)

[gleaming jungle]

Specifically this line is throwing an error

const [formState, removeEducationRecord] = useFormState(deleteEducation, initialState)

Error: TS2769 - No overload matches this call.

1. Overload 1 of 2:
   Function signature:
   (action: (state: FormState | null | undefined) => FormState | Promise<FormState | null | undefined> | null | undefined, initialState: FormState | null | undefined, permalink?: string | undefined): [state: ...]

   Error:
   Argument of type (previousState: FormState, formData: FormData) => Promise<{ success: undefined; errors: { message: string; }; } | { success: string; errors: { message: undefined; }; } | null | undefined> is not assignable to parameter of type (state: FormState | null | undefined) => FormState | Promise<FormState | null | undefined> | null | undefined.
   Target signature provides too few arguments. Expected 2 or more, but got 1.

2. Overload 2 of 2:
   Function signature:
   (action: (state: FormState | null | undefined, payload: FormData) => FormState | Promise<FormState | null | undefined> | null | undefined, initialState: FormState | ... 1 more ... | undefined, permalink?: string | undefined): [state: ...]

   Error:
   Argument of type (previousState: FormState, formData: FormData) => Promise<{ success: undefined; errors: { message: string; }; } | { success: string; errors: { message: undefined; }; } | null | undefined> is not assignable to parameter of type (state: FormState | null | undefined, payload: FormData) => FormState | Promise<FormState | null | undefined> | null | undefined.
   Types of parameters previousState and state are incompatible.
   Type FormState | null | undefined is not assignable to type FormState.
   Type undefined is not assignable to type FormState.

export const deleteEducation = async (previousState: any, formData: FormData)

I've narrowed it down to the previousState type, because when I change it to any type the issue resolves

I'm not sure why its saying previousState is FormState | null | undefined when I typecasted it to be FormState

[dark crag]

I usaully just do this

const initialState = {} as Awaited<ReturnType<typeof deleteEducation>>

[gleaming jungle]

So then in my actions.ts what should the type be for previousState?

i cant reference the function in the type

should i just use any

i would prefer not to use any

[dark crag]

export type DeleteEducationFormState = Awaited<ReturnType<typeof deleteEducation>>

[elfin scaffold]

yeah its confusing, in the docs they actually use any XD

[gleaming jungle]

export type DeleteEducationFormState = Awaited<ReturnType<typeof deleteEducation>>

export const deleteEducation = async (previousState: DeleteEducationFormState, formData: FormData) => {
...
}

TS2456: Type alias  DeleteEducationFormState  circularly references itself.

yeah they use any in the docs lol

[dark crag]

export type DeleteEducationFormState = Awaited<
  ReturnType<(typeof deleteEducation.arguments)[0]>
>;

does it work?

i guess not lol

[gleaming jungle]

same issue of circularly referencing itself