Building Forms: Lesson 14 Zod Hook

React
1

The following code fragment in this lesson is not producing the results with the latest version of Zod I have installed:

const schema = z.object({
  description: z
    .string()
    .min(3, { message: "Description should be at least 3 characters" })
    .max(50),
  amount: z
    .number({ invalid_type_error: "Amount is required" })
    .min(0.01)
    .max(100_000),
  category: z.enum(categories, {
    errorMap: () => ({ message: "Category is required" }),
  }),
});

The “Amount is required” message shows as “Amount”.

The code that works is as follows:

const schema = z.object({
  description: z
    .string()
    .min(3, { message: "Description should be at least 3 characters" })
    .max(50),
  amount: z
    .number({
      required_error: "Amount is required",
      invalid_type_error: "Amount must be a number",
    })
    .min(0.01)
    .max(100_000),
  category: z.enum(categories, {
    errorMap: () => ({ message: "Category is required" }),
  }),
});
2

If by ‘latest version of Zod’ you mean a version other than what Mosh is using then you’ll either have to uninstall your version of Zod and reinstall the one Mosh is using or you’ll have to go through the Zod release notes and find out what they’ve changed that breaks your code.

3

Hello,

I was running through this exact problem and actually found a fix!

Run this command in your terminal:

npm i -save-dev @hookform/resolvers

Source:

Cheers!

Mathew