yupResolver raise Types of parameters 'options' and 'options' are incompatible at react-hook-form 7.15.0

[heavenshell]

Hello.

Describe the bug

I updated react-hook-form 7.15.0, yupResolver raise following type error messages.

Type '<TFieldValues extends Record<string, any>, TContext>(values: UnpackNestedValue<TFieldValues>, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<...>' is not assignable to type 'Resolver<FormType, object>'.
  Types of parameters 'options' and 'options' are incompatible.

Same code with react-hook-form 7.14.2 works fine(no type error).

versions

• react: 17.0.2
• react-hook-form: 7.15.0
• @hookform/resolvers: 2.8.0
• dayjs: 1.10.6
• yup: 0.32.9
• typescript: 4.3.5

To Reproduce

1. Go to https://codesandbox.io/s/sad-wilson-rvpvv?file=/src/App.tsx
2. move mouse cursor to line 22 and hover resolver
3. Error message popup.

Codesandbox link (Required)

https://codesandbox.io/s/sad-wilson-rvpvv?file=/src/App.tsx:456-464

Expected behavior

No type error raised, or I want to know how to avoid type error
(react-hook-form 7.14.2 works fine)

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 92.0.4515.159（Official Build） （x86_64）

Additional context

None

Thank you!

[asalahjawava]

I have the same exact issue but with joiResolver. Suddenly after updating to the latest versions I got that type error. Any updates regarding that issue?

[github-actions]

🎉 This issue has been resolved in version 2.8.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[heavenshell]

@jorisre Thank you for fixing, but unfortunately still raise type error in my app....

https://codesandbox.io/s/hardcore-darwin-qusu6?file=/src/App.tsx

I Updated to
@hookform 2.8.1 and react-hook-form 7.15.3

@asalahjawava
Does your application works fine?

[jorisre]

Thank you @heavenshell for reporting the issue. I'll open a PR.

[jorisre]

@heavenshell You can remove <FormType> from the useForm<FormType>. Types are inferred from the schema.

[rares-lupascu]

same issue here ... tried calling useForm without field definitions but this generated an issue with the defaultValues key

[jorisre]

Can you share a codesanbox please ?

Edit: you've a typescript with default values not resolver.

[rares-lupascu]

https://codesandbox.io/s/dawn-butterfly-klfoq?file=/src/App.tsx

[rares-lupascu]

it is because i use yup.object().shape() instead of yup.object()

[jorisre]

it is because i use yup.object().shape() instead of yup.object()

Using object() instead of object().shape() fix your issue ?

[rares-lupascu]

it is like a chain of errors ... after switching to object() ... I get inline errors on the <Controller />
if I have nullable fields ... I will get this error:

this is because In schema the field is nullable

[toytonic]

Hi there, in my case the error shows up on the resolver option. When I remove the generic form useForm, the error disappears from resolver but new errors appear using <Controller />. Will try to debug further...

[Mihai-github]

Hi,
My current setup is:

"@hookform/resolvers": "^2.8.1",
"react-hook-form": "7.15.4",
"yup": "^0.32.9",
"@types/yup": "^0.29.13"

---

They are the latest versions that are atm available and how I solved the above error is by using the yupResolver with the next generic type yupResolver<yup.AnyObjectSchema>. An example could be the following:

export type TModelRegisterFormInputs = {
    email: string;
    password: string;
    passwordConfirmation: string;
    role: Roles;
    callback?: any;
};

const schema = yup.object().shape({
    email: yup.string().required(),
    password: yup
        .string()
        .required()
        .min(4, 'Password is too short - should be 8 chars minimum.')
        .matches(/[a-zA-Z]/, 'Password can only contain Latin letters.'),
    passwordConfirmation: yup
        .string()
        .required()
        .oneOf([yup.ref('password'), null], 'Passwords must match'),
});

const {
        handleSubmit,
        formState: {errors},
        control,
    } = useForm<TModelRegisterFormInputs>({
        resolver: yupResolver<yup.AnyObjectSchema>(schema),
    });

---

You can also add the defaultValues and I would recommend you to do that.

Hope it helps you :)

[Manubi]

Hi,
I ran into kind of the same problem with the latest packages...

I am not that familiar with typescript to debug it myself... I feel like moving in circles.
Can anyone please give a hand. thanks! ❤️

[hawkcookie]

hello there. I ran into the same type error with @hookform/resolvers: 2.8.1.
My setup and error is below.

"react": "17.0.2",
"typescript": "^4.4.3",
"react-hook-form": "^7.15.4",
"@hookform/resolvers": "^2.8.1",
"yup": "^0.32.9"

12:54:52.034 | Type error: Type '(values: unknown, context: object, options: ResolverOptions<AssertsShape<Assign<ObjectShape, { email: RequiredStringSchema<string, Record<string, any>>; }>>>) => Promise<...>' is not assignable to type 'Resolver<{ email: string; }, object>'.
-- | --
12:54:52.034 | Types of parameters 'options' and 'options' are incompatible.
12:54:52.034 | Type 'ResolverOptions<{ email: string; }>' is not assignable to type 'ResolverOptions<AssertsShape<Assign<ObjectShape, { email: RequiredStringSchema<string, Record<string, any>>; }>>>'.
12:54:52.034 | Type '{ email: string; }' is not assignable to type 'AssertsShape<Assign<ObjectShape, { email: RequiredStringSchema<string, Record<string, any>>; }>>'.
12:54:52.034 | Property 'email' is incompatible with index signature.
12:54:52.034 | Type 'string' is not assignable to type 'never'.

[athammer]

Hi, I'm assuming you have enough to go on right now but also wanted to report this also seems to be an issue with Zod. Thank you for all your work on this project!

Type '(values: unknown, context: object | undefined, options: ResolverOptions<{ username: string; email: string; password: string; passwordConfirmation: string; }>) => Promise<ResolverResult<{ username: string; email: string; password: string; passwordConfirmation: string; }>>' is not assignable to type 'Resolver<FieldValues, object>'.
  Types of parameters 'options' and 'options' are incompatible.
    Type 'ResolverOptions<FieldValues>' is not assignable to type 'ResolverOptions<{ username: string; email: string; password: string; passwordConfirmation: string; }>'.
      Types of property 'names' are incompatible.
        Type 'string[] | undefined' is not assignable to type '("username" | "email" | "password" | "passwordConfirmation")[] | undefined'.
          Type 'string[]' is not assignable to type '("username" | "email" | "password" | "passwordConfirmation")[]'.
            Type 'string' is not assignable to type '"username" | "email" | "password" | "passwordConfirmation"'.

Versions are...
"@hookform/resolvers": "2.8.1",
"react-hook-form": "7.15.0",

Downgrading both packages fixed this.

[bluebill1049]

@k-maekawa & @athammer can you share code in a codesandbox? If this update affects other resolvers such as Zod we should revert the change.

[9hnd5]

Hi. I still get the same error when use react-hook-form(7.16.0) and @hookform/resolvers(2.8.1). Do we have any way to workaround? Please see my codesanbox https://codesandbox.io/s/crazy-knuth-ylcsp?file=/src/App.tsx

[bluebill1049]

@huynd0902

const schema = yup.object({
  firstName: yup.string().required()
}).required();

[9hnd5]

@bluebill1049 So this is a official fix for this issue? Because the previous version I do not need to do this. But yesterday when I checked the docs. It say something like you show above.

[bluebill1049]

no, we are considering to revert back 2.8.1.

[9hnd5]

Hopefully, You will fix this issue soon because I really love this library. Thank you.

[bluebill1049]

7.16.0 solve the original issue above. the other issue is related to 2.8.1 #245

[Lemaro86]

Types of parameters 'options' and 'options' are incompatible if you use a few selected elements of array in select.
in "react-hook-form": "7.17.1", and "@hookform/resolvers": "2.8.1",