Unable to understand why form is invalid but there are no errors inside the error object

[iongion]

Using

• yup 1.0.2
• @hookform/resolvers 2.9.11
• react-hook-form 7.43.5

Having this schema

const TournamentSchema = object({
  TournamentID: number().defined().required(),
  LeagueID: number().defined().required(),
  League: LeagueSchema.defined().required(),
  SeasonID: number().defined().required(),
  Season: SeasonSchema.defined().required(),
  Name: string().defined().required().min(1),
})

When using resolver: yupResolver(TournamentSchema) on a form that has all fields declared, except LeagueID and SeasonID - it fails, as it should. But there are no errors at all inside the error object and it is impossible to debug. The devtools don't report them either.

As soon as I am using this kind of resolver from the docs, I can see all errors in the console output

const useYupValidationResolver = (validationSchema: any) =>
  useCallback(
    async (data: any) => {
      try {
        const values = await validationSchema.validate(data, {
          abortEarly: false,
        });
        console.log("validation ok", values);
        return {
          values,
          errors: {},
        };
      } catch (errors) {
        const errorsMap = (errors?.inner || []).reduce(
          (allErrors, currentError) => ({
            ...allErrors,
            [currentError.path || currentError.type || "validation"]: {
              type: currentError.type ?? "validation",
              message: currentError.message,
            },
          }),
          {}
        );
        console.error("errors in catch", JSON.stringify(errors, null, 2), errorsMap);
        return {
          values: {},
          errors: errorsMap,
        };
      }
    },
    [validationSchema]
  );

Then in render

console.debug(">> render", formState.errors, formState.isValid);

• In which isValid is false as it should
• errors is empty, it should actually have

{
  "LeagueID":  {type: 'typeError', message: 'LeagueID must be a `number` type, but the final value was: `NaN`.'}
  "SeasonID": {type: 'typeError', message: 'SeasonID must be a `number` type, but the final value was: `NaN`.'}
}

Now the situation is totally normal, but why is the error object empty ?

[jorisre]

Can you share a reproducible example vi CodeSandbox please?

[iongion]

Thanks - here it is, not that minimal

https://codesandbox.io/s/elated-frog-uilb2s?file=/src/App.tsx

[leapful]

@iongion

Please read carefully the documentation

Error can only be mapped if it was registered with react-hook-form. In your example, even with built-in yup resolver or your custom yup resolver, there is only one input "Name" has been registered, therefore react-hook-form cannot validate and show error of what it does not know.

[7system7]

I have the same issue, and maybe I misunderstand something, but I cannot solve this issue on this form.

I have simple a resolver:

yupResolver(
  yup
    .object()
    .shape({
      withdrawalType: yup
        .string()
        .required(t('resources.users.edit.withdrawal.dialog.validation.type')),
    })
    .required(),
)

And I have only one input field what is a MUI `ButtonGroup ̇, and when I see this code's output:

const { watch, getFieldState, getValues } = useFormContext();
const { dirtyFields, isValid } = useFormState();

console.log(
  watch(),
  isValid,
  getFieldState('withdrawalType'),
);

I got this:

Object { withdrawalType: "/api/withdrawal_types/2" }
false 
Object { invalid: false, isDirty: true, isTouched: true, isValidating: false, error: undefined }

My question is, what have I missed? (Now, I have a workaround for this, to see all field states...)