useActionData cannot get formError or fieldErrors

[tempoeric]

Reproduction

https://stackblitz.com/edit/remix-run-remix-aagfjb?file=app%2Froutes%2Fhome.child.tsx,package.json,tailwind.config.ts,app%2Froutes%2Fhome.tsx

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.14.0 - /usr/local/bin/pnpm

Used Package Manager

npm

Expected Behavior

should be able to log the errors or fetch from actionData

Actual Behavior

unable to fetch formErrors or fieldErrors in formData using useActionData() try to uncomment line 98 and 99 in home.child.tsx you should be able to get errors and fields using actionData but it causes error

[tempoeric]

@sergiodxa can you help me with this?

[brophdawg11]

There are 2 separate issues here:

• Your <Form> was submitting to a non-existent /login route via action="/login" - removing that allows the form to be submitted to the current route action
• Typescript was giving you errors because in some of your return cases, error or errors didn't exist. So typescript cannot be sure which return pat hwas taken so it is forcing you to use type narrowing. The best solution for this IMO is to use a consistent return shape and put error: null or errors: null in the cases they don't apply

Here's a working example! https://stackblitz.com/edit/remix-run-remix-r3ndfy?file=app%2Froutes%2Fhome.child.tsx,package.json,tailwind.config.ts,app%2Froutes%2F_index.tsx