issue: resolver parameter of useForm hook is wrong typed

[supersnager]

Version Number

7.51.1

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-form-and-yup-ytml5y

Steps to reproduce

1. Go to https://codesandbox.io/p/sandbox/react-hook-form-and-yup-ytml5y
2. Scroll down to line 49
3. See Typescript error on "resolver" property:

Type 'Resolver<{ name: string; }, any>' is not assignable to type 'Resolver<FormInput, any>'.
  Types of parameters 'values' and 'values' are incompatible.
    Type 'FormInput' is not assignable to type '{ name: string; }'.typescript(2322)

Explanation

First of all thank you guys for this awesome library!
I 'm migrating my project from Formik to RHF and it's a really good experience, but I have found a bug with typings.

What I want to achieve is that my FormInput type have some properties that can have a null value.
In empty form, I want to set for example select field (ReactSelect) to empty value.
The field is nullable, but user has to fill it to submit the form.
Therefore I want my onsubmit type (FormOutput) should be validated version of FormInput.

Hoverver when the example is correctly typed, the Typescript error appears.

This is because the expected type of the resolver property is Resolver<TFieldValues, TContext> (Resolver)
but yupResolver function returns Resolver<Yup.InferType<typeof schema> (Resolver) and these types doesn't match

Please also see the comments in the linked sandbox.

I'm not sure, but It seems to me that the fix should be something similar to this fix react-hook-form/react-hook-form@662f2c6

Expected behaviour

No errors

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[supersnager]

@bluebill1049 Could you please link the duplicate issue?

[jorisre]

Hi @supersnager,

I have transferred your issue to the Resolvers repo.
Unfortunately, I don't have a viable solution without breaking the project—it's a design limitation.

As a workaround, here’s what I can suggest: https://codesandbox.io/p/sandbox/react-hook-form-and-yup-forked-j35vtl

You need to specify the type for both useForm and yupResolver to maintain consistency.

interface FormInput {
  name: string | null;
}

interface FormOutput {
  name: string;
}

const schema: yup.ObjectSchema<FormOutput> = yup.object({
    name: yup.string().required("Name is required"),
});

const { handleSubmit } = useForm<FormInput, any, yup.InferType<typeof schema>>({
    resolver: yupResolver<FormInput>(schema),
    defaultValues: {
      name: null,
    },
});

Let me know what you think.

[supersnager]

@jorisre Thank you for checking that.

Your workaroud is the same as my mentioned in the comment in my codesandbox (https://codesandbox.io/p/sandbox/react-hook-form-and-yup-ytml5y), so I already know it, and I use it everywhere in my projects :).
However it's still workaround, because type must be "artificially" forced and typing is not consistent without forcing.
If the expected type of resolver property is Resolver<FormInput>, and yupResolver always returns Resolver<FormOutput> it generaly does not make sense.
So the programmer has to “fool” the compiler, which we do not want, and instead we want the compiler, should keep an eye on the programmer, because this is the role of the compiler :).

If it's not possible to fix this without doing breaking change, maybe it's time to release a new major version?

[VILLAN3LL3]

bump

[jorisre]

A pull request is currently in progress. #753