Type 'ResolverOptions<FormValues>' is not assignable to type 'ResolverOptions<{..............}>'

[bezuglyyvlad]

Describe the bug
TS2322: Type 'Resolver<{ ......... }, any>' is not assignable to type 'Resolver<FormValues, any>'.   Types of parameters 'options' and 'options' are incompatible.     Type 'ResolverOptions' is not assignable to type 'ResolverOptions<{ ......... }>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.       Type '{ ............. }' is not assignable to type 'FormValues'.

To Reproduce
Steps to reproduce the behavior:

1. Update to 3.1.1 version
2. See error in react-hook-form useForm({resolver: ....... })

CSB
https://codesandbox.io/s/react-hook-form-typescript-forked-3c7fy9?file=/src/index.tsx

[bluebill1049]

Could you provide some more detail with a reproducible CSB? thanks

[hasan-mehboob]

I am facing the same issue

[bezuglyyvlad]

Could you provide some more detail with a reproducible CSB? thanks

added CSB

[henrikvolmer]

Could you provide some more detail with a reproducible CSB? thanks

added CSB

You cast your useForm to the wrong type.

https://codesandbox.io/s/react-hook-form-typescript-forked-34kq9w?file=/src/index.tsx

[bezuglyyvlad]

Could you provide some more detail with a reproducible CSB? thanks

added CSB

You cast your useForm to the wrong type.

https://codesandbox.io/s/react-hook-form-typescript-forked-34kq9w?file=/src/index.tsx

Why, if I don't have to write schema for every form field? The form field cannot be undefined in my case

[henrikvolmer]

Could you provide some more detail with a reproducible CSB? thanks

added CSB

You cast your useForm to the wrong type.
https://codesandbox.io/s/react-hook-form-typescript-forked-34kq9w?file=/src/index.tsx

Why, if I don't have to write schema for every form field? The form field cannot be undefined in my case

Then your schema fields should be required:

https://codesandbox.io/s/react-hook-form-typescript-forked-xj8fhw?file=/src/index.tsx

[mtr1990]

3.1.0 is OK

3.1.1 many issue

[jorisre]

Types are inferred from the Yup schema so remove <FormValuesProps> from useForm

[mtr1990]

@jorisre

When I remove <FormValuesProps> from useForm

it says data type error in <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>

When I remove FormValuesProps from data:FormValuesProps

it says data type error in

 const onSubmit = useCallback(
    async (data) => {

[jorisre]

 const onSubmit = useCallback(
    handleSubmit(async (data) => {
       // Do your stuff
    })
 , [])

react-hook-form is strongly typed, you can infer data types from handleSubmit

[mtr1990]

Still no success :(

Am I missing something?

[jorisre]

Here is the updated release note, sorry for the mistake, it should be at least a minor version instead of a patch

https://github.com/react-hook-form/resolvers/releases/tag/v3.1.1

[jorisre]

@mtr1990 Can you provide a CodeSandbox with your issue? You probably don't need useCallback

https://kentcdodds.com/blog/usememo-and-usecallback

[mtr1990]

No longer gives error when removing useCallback

  const onSubmit = handleSubmit(async (data) => {
    try {
      await new Promise((resolve) => setTimeout(resolve, 500));
      reset();
      onClose();
      console.info('DATA', data);
    } catch (error) {
      console.error(error);
    }
  });

Just confirm function handleSubmit will not work in useCallback. I will eliminate the time thinking about this.

Thanks for your help :D

[mtr1990]

This is the problem. Old code can be kept, but tighter constraints are needed.

  const defaultValues = {
    rating: null,
    review: '',
    name: '',
    email: '',
  };

3.1.0 rating: Yup.mixed().required('Rating is required'),
3.1.1 rating: Yup.number().required('Rating is required').nullable()

[mtr1990]

Hi @jorisre,

I think this is a different problem with types. When data depends on schema.

My case has 4 fields:

• title
• description
• content
• metaTitle

But I just want to validate for 2 fields title, description

The remaining 2 fields are content,metaTitle does not recognize the type

You can check here:
https://codesandbox.io/s/keen-snyder-pv63pq?file=/src/logic.tsx

[henrikvolmer]

Then just add the fields without any validator:

https://codesandbox.io/s/morning-glitter-ypdjnn?file=/src/logic.tsx

[mtr1990]

Hi,

Yes I know but is this a must?

const NewBlogSchema = Yup.object().shape({
  title: Yup.string().required("Title is required"),
  description: Yup.string().required("Description is required"),
  content: Yup.string(), => Required here
  metaTitle: Yup.string() => Required here
});

if the case is createDate: Date | string | number | null

and

if the case is file: File | string | null

How will we define it?

[henrikvolmer]

This is not really recommendable, but if that is, what you want, then do it like this:

https://codesandbox.io/s/morning-glitter-ypdjnn?file=/src/logic.tsx

[mtr1990]

@henrikvolmer Thank you so much, I will try it!

[mtr1990]

Update:

  content: Yup.mixed<File | string>()
    .nullable()
    .required("content is required"),

=> Can catch errors. But type error

  content: Yup.mixed<File | string>()
    .required("content is required")
     .nullable(),

=> Can not catch errors.

https://codesandbox.io/s/rough-bash-sj3f6x?file=/src/logic.tsx

[lamontescott]

The solution that worked for me was that I forgot to add the shape of Yup schema. Ex.

const schema = Yup.object<SomeInterface>().shape({
firstName: "first name here",
lastName: "last name here"
});
const { register, handleSubmit, formState: { errors }} = useForm({ resolver: yupResolver(schema) });