Form don't like a schema with refine on it, and I can't understand why

[darlantc]

I created a schema with a .refine (following your example on https://remix-forms.seasoned.cc/examples/schemas/zod-effects) and it has a great UX on front-end by displaying the error & focusing the creditCardInvoiceSlug field when it is empty. But TS is not happy with it and I needed to put a // @ts-expect-error to move forward but that disabled all Zod key checking in my form.

My schema (simplified with the fields involved on refine):

export const transactionFormSchema = z
  .object({
    paymentSource: z.string().min(1, {
      message: "Escolha Conta ou Cartão",
    }),
    creditCardInvoiceSlug: z.string().nullish(),
  })
  .refine(
    ({ creditCardInvoiceSlug, paymentSource }) =>
      paymentSource.startsWith("creditCard") && !creditCardInvoiceSlug,
    {
      message: "É necessário informar a fatura do cartão",
      path: ["creditCardInvoiceSlug"],
    }
  );

The error:

Type 'ZodEffects<ZodObject<{ paymentSource: ZodString; creditCardInvoiceSlug: ZodOptional<ZodNullable<ZodString>>; }, "strip", ZodTypeAny, { ...; }, { ...; }>, { ...; }, { ...; }>' is missing the following properties from type 'ZodObject<ZodRawShape, UnknownKeysParam, ZodTypeAny, { [x: string]: any; }, { [x: string]: any; }>': _cached, _getCached, shape, strict, and 14 more.

I tried moving the refine to the mutation but when I do it I lose the front-end auto focus feature on the missing field and that's bad.

[darlantc]

It was a problem in my form wrapper type, it worked fine with the refine now 🥳