Zod + React-hook-form + lingui

[asafs94]

Wondering if anyone has come across the following issue:
I am using zod & react-hook-form & lingui.

I would like to display a translated error message to the user and not sure what is the best approach.
I would like to keep the schema outside of React if possible, but would still like to be able to supply detailed error messages.
The issue is, once react-hook-form takes in the information from zod. A lot of the information disappears.
Example:

const myFormSchema = z.object({
  name: z.string().min(3)
})

function MyForm(){
  const formMethods = useForm({ resolver: zodResolver(myFormSchema) })
  ...
}

The error I would get from react-hook-form here is the following:
{ type: "too_short", message: "ZOD's DEFAULT ERROR MESSAGE HERE", ref: (THE INPUT REF HERE) }
Which is not enough detail to generate the translated message.

So I end up doing this:

function MyForm(){
  const t = useTrans()
  const myFormSchema = z.object({
    name: z.string().min(3, t("form_errors.min_length", { label: t(`name`), min: 3 }))
  })
  const formMethods = useForm({ resolver: zodResolver(myFormSchema) })
  ...
}

Which I feel, defeats the purpose of zod because I would like to auto-infer the type of the schema and also reuse it.
But in this state, it doesn't exist outside of React.

Any advice? Is there something I'm doing wrong?

[JacobWeisenburger]

This seems like it's a very complex problem with a few different libraries. I'm happy to help with the zod part. However, I can't really tell where zod is causing a problem. Can you send a reproducible code example of where the problem is with zod?

[AmeerDlshad]

This could very easily be fixed if the error messages can accept functions.
for example you could just do this:

name: z.string({required_error:()=>t`Name is required`}).min(4,{message:()=>t`Name must be at least 4 characters long`})

and it just works.

[asafs94]

Sure, will do so this evening.
Thank you

[AmirL]

Hi @asafs94

You can use z.setErrorMap in a separate file.

https://zod.dev/ERROR_HANDLING?id=customizing-errors-with-zoderrormap

import { plural, t } from '@lingui/macro';
import { z } from 'zod';

const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
  // console.log(issue, ctx);
  switch (issue.code) {
    case z.ZodIssueCode.too_small:
      const min = (issue.minimum ?? 0) as number;
      return {
        message: plural(min, {
          one: 'Field is required',
          other: `Field must contain at least # characters`,
        }),
      };
  }

  return { message: ctx.defaultError };
};

z.setErrorMap(customErrorMap);

[LeonMueller-OneAndOnly]

Hi @asafs94

You can use z.setErrorMap in a separate file.

https://zod.dev/ERROR_HANDLING?id=customizing-errors-with-zoderrormap

import { plural, t } from '@lingui/macro';
import { z } from 'zod';

const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
  // console.log(issue, ctx);
  switch (issue.code) {
    case z.ZodIssueCode.too_small:
      const min = (issue.minimum ?? 0) as number;
      return {
        message: plural(min, {
          one: 'Field is required',
          other: `Field must contain at least # characters`,
        }),
      };
  }

  return { message: ctx.defaultError };
};

z.setErrorMap(customErrorMap);

That works perfectly. For everyone who likes typescript here is refined implementation (to ensure no code are missing / if they are missing that is intentional):

import { plural, t } from "@lingui/macro"
import { ErrorMapCtx, z, ZodIssueOptionalMessage } from "zod"

type TTypedCallback<T extends z.ZodIssueCode> = (
  issue: Extract<ZodIssueOptionalMessage, { code: T }>,
  _ctx: ErrorMapCtx
) => {
  message: string
}

type THandlerMap = {
  [K in z.ZodIssueCode]: TTypedCallback<K>
}

const handlerMap: THandlerMap = {
  custom: (issue, ctx) => ({ message: ctx.defaultError }),
  invalid_arguments: (issue, ctx) => ({ message: ctx.defaultError }),
  invalid_date: (issue, ctx) => ({ message: t`Ungültiges Datum` }),
  invalid_enum_value: (issue, ctx) => ({ message: t`Ungültiger Wert` }),
  invalid_type: (issue, ctx) => ({ message: ctx.defaultError }),
  invalid_intersection_types: (issue, ctx) => ({ message: ctx.defaultError }),
  invalid_literal: (issue, ctx) => ({ message: ctx.defaultError }),
  invalid_return_type: (issue, ctx) => ({ message: ctx.defaultError }),
  invalid_string: (issue, ctx) => ({ message: ctx.defaultError }),
  invalid_union: (issue, ctx) => ({ message: ctx.defaultError }),
  invalid_union_discriminator: (issue, ctx) => ({ message: ctx.defaultError }),
  not_finite: (issue, ctx) => ({ message: ctx.defaultError }),
  not_multiple_of: (issue, ctx) => ({ message: ctx.defaultError }),
  too_big: (issue, ctx) => ({ message: ctx.defaultError }),
  too_small: (issue, ctx) => {
    const min = (issue.minimum ?? 0) as number
    return {
      message: plural(min, {
        one: "Field is required",
        other: `Field must contain at least # characters`,
      }),
    }
  },
  unrecognized_keys: (issue, ctx) => ({ message: ctx.defaultError }),
}

const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
  return handlerMap[issue.code](issue as any, ctx)
}

export function registerCustomZodErrorMap_withLinguiTranslations() {
  z.setErrorMap(customErrorMap)
}