Typescript Errors for flattened error object

[jameswoodley]

I am using SvelteKit and it's form actions. When my server.ts file returns a fail, SvelteKit puts the result into the ActionData object, which it assigns for you

I'm kicking back Zod validation errors:

Everything actually works, so this could be deemed minor, but Typescript doesn't like the form.errors object

Reading the docs, I see the Extract type signature section, but not being a native TS guy, I'm getting a touch lost with it. Can anyone assist with how to get TS happy?

[JacobWeisenburger]

Please send a reproducible code example.

[jameswoodley]

It looks like restarting VS Code has removed these errors so I think we can close this, apologies

[jameswoodley]

@JacobWeisenburger

It's back.. seems to be when running through the dev server you get these issues. To start the dev server in SvelteKit it's pnpm dev

Have attached working directory
agents.zip

[bobgravity1]

I don't know with SvelteKit but here is a snippet of my React Code if it's of any help

*✅ safeParse() never throws -> use this for frontend but parse() for backend -> so long as your errors and schema/zod setup is flat (one level deep) I personally think the flattenError stuff is the move!

const parsed = ContactFormData.safeParse(raw);

   let flattened;
   if (!parsed.success) {
     flattened = z.flattenError(parsed.error);
     // this will block the try-catch from running below and return the errors as a stateful object
     return { ...flattened };
   }

the magic with this is if each field name is tied to zod correctly and your schema is legit (one level deep) then you can typically access the errors with: state.fieldErrors.email[0] etc.

I hope this makes sense? Zod changes it's syntax and ecosystem all the time but the flattenedError stuff really helps so long as your data is flat. treeifyErrors or whatever is best if it's really deeply nested.

what I tend to do is really break out my zod errors as much as possible. I define my names, my fields, and allll those schemas separately - that way it's far easier to manage them independently and then put them into my form. if you follow that below:

     import { z } from "zod";

// -----------------------------SCHEMA DEFINITION -------------------------------------- //
const nameSchema = z
  .string()
  .min(2, { message: "Please share at least two characters for your name." });
const emailSchema = z.email({
  message: "Please provide a valid email address",
});
const messageSchema = z
  .string()
  .min(5, { message: "Please send a longer message!" });

const phoneSchema = z
  .string()
  .trim()
  .regex(/^[0-9+\-\s()]*$/, {
    message: "Phone number must have proper format: (333) 333-3333",
  })
  .refine(
    (val) => {
      const digits = val.replace(/\D/g, "");
      return digits.length === 0 || digits.length >= 6;
    },
    {
      message: "Phone number must have at least 6 digits (area code + number).",
    },
  )
  .transform((value) => {
    const trimmed = value.trim();
    return trimmed.length === 0 ? undefined : trimmed;
  });

const idSchema = z.uuid();

const ContactFormData = z.object({
  name: nameSchema,
  email: emailSchema,
  message: messageSchema,
  id: idSchema,
  phone: phoneSchema.optional(),
});

type ContactFormType = z.infer<typeof ContactFormData>;
// -----------------------------EXPORTS-------------------------------------- //
export type ContactFormDataType = z.infer<typeof ContactFormData>;
export { ContactFormData };

[bobgravity1]

AH I see. In your example you are making your errors: flattenedErorrs

so my guess is that your errors are two levels deeper than they need to be