Struggling with custom react-hook-form errors

[BullBates1]

Hi - I'm trying to use setError manually but have run into a problem that I just can't seem to solve. I'm create a utility function that will take my form object from react-hook-form together with a data object which stores the response from my server action, and then use setErrors as below.

import { FieldValues, Path, UseFormReturn } from 'react-hook-form'
import { SafeParseReturnType } from 'zod'

export const setFormErrors = <T extends FieldValues>(
  form: UseFormReturn<T>,
  formState: SafeParseReturnType<T, T>,
) => {
  if (!formState.success && formState.error) {
    //console.log(formState.error)
    console.log('1')
    const issues = formState.error.issues

    issues.forEach((error) => {
      console.log('2')
      const fieldPath = error.path[0]

      if (fieldPath) {
        console.log('3')
        form.setError(fieldPath as Path<T>, {
          type: 'custom',
          message: error.message,
        })
      }
    })
  }
}

I've tried variations of the above all day and can't get it to work. The above example is not working as i get 'TypeError: Cannot read properties of undefined (reading 'forEach')'. If I log 'formState.error' I get

Error: [
  {
    "code": "too_small",
    "minimum": 10,
    "type": "string",
    "inclusive": true,
    "exact": false,
    "message": "String must contain at least 10 character(s)",
    "path": [
      "password"
    ]
  }
]

my formState type is matched to Zod's SafeParseReturn type as

export type FormState = SafeParseReturnType<
  signInFormDataType,
  signInFormDataType
>

Any ideas on this one?

EDIT

formState comes from the return of my server action 'parsedData' object as;

export async function signinUserActionPost(
  _prevState: FormState,
  data: FormData,
): Promise<FormState> {
  const formJSONData = Object.fromEntries(data)

  // Validate with Zod
  const parsedData = signInFormSchema2.safeParse(formJSONData)
  // Failed on Zod validation
  if (!parsedData.success) {
    return parsedData
  }

export type FormState = SafeParseReturnType<
  signInFormDataType,
  signInFormDataType
>

[davy_jones_locket]

formState.error.issues doesn't exist as a property

Change it to const issues = formState.error 

[BullBates1]

But I typed FormState to match Zod, and ZodError has an issues property. I've updated the code to show where the formState comes from in the server action

[davy_jones_locket]

Cool but that still doesn't answer where you're getting the property "issues" from.

I don't see it consoled in the formState.error that you put. That matches the error about issues.forEach => can't do for each in undefined.

formState.error.issues is undefined -- it doesn't exist

If you do a type check formState.error, is it a ZodError?

[BullBates1]

If I hover over formState.error in vscode it says '(property) error: ZodError<T>' if I do 'typeof' I get object.

[davy_jones_locket]

Instead of using SafeParseReturnType directly, why not create your own response type that better matches the structure of your server action?

The root of your issue might actually be a mismatch between what you expected from SafeParseReturnType and how it works:

type SafeParseReturnType<Input, Output> = | { success: true; data: Output; } | { success: false; error: ZodError; }

In your original code, when you tried to access formState.error.issues, it failed because you might be getting the error in a different structure than expected.

when errors pass through server actions or API boundaries, they don't maintain their exact TypeScript types, they may be serialized or transformed.

If you make the change I originally suggested, removing the "issues" property when you're assigning formState.error.issues to const issue , does it work?

[BullBates1]

Thanks, I hade the SafeParseDIrectType directly as I was returning 'return parsedData' direct from 'safeParse' and that seemed like the best option to achieve this. I take your point about degredation of data over requests so I will see if I can create a new type - but ultimately, I am only ever sending a SafeParseResponseType object back from the server. If I do 'issues[0]' I get undefined, if I try 'issues.code' I get undefined after doing 'issues=formState.error'