resolvers: typescript type error for yupResolver

Describe the bug I upgraded the version from 2.9.10 to 3.3.2 and it stopped working.

To Reproduce I am creating a generic function that wraps useForm

import {
  DefaultValues,
  FieldValues,
  Mode,
  Path,
  useForm,
} from "react-hook-form";
import * as yup from "yup";

export interface CreateFormOptions<T> {
  rules: Record<keyof T, yup.AnySchema>;
  defaultValues?: DefaultValues<T>;
  validateMode?: Mode;
}

export const CreateForm = <T extends FieldValues>({
  rules,
  defaultValues,
  validateMode = "onChange",
}: CreateFormOptions<T>) => {
  const schema = yup.object().shape(rules);
  const {
    register,
    handleSubmit,
    setError,
    watch,
    control,
    getValues,
    setValue,
    formState: { errors, isValid, isDirty },
    reset,
    resetField,
  } = useForm<T>({
    defaultValues: stripNulls(defaultValues) as DefaultValues<T>,
    resolver: yupResolver(schema),
    mode: validateMode,
  });
...

There was no problem with previous versions

"@hookform/resolvers": "^2.9.10",
"yup": "^0.32.11"

A type error occurred at resolver after updating the version.

"@hookform/resolvers": "^3.3.2",
"yup": "^1.3.2"

Type 'Resolver<MakeKeysOptional<_<{} & TypeFromShape<Record<keyof T, AnySchema>, AnyObject>>>>' is not assignable to type 'Resolver<T, any>'.
  Types of parameters 'values' and 'values' are incompatible.
    Type 'T' is not assignable to type 'MakeKeysOptional<_<{} & TypeFromShape<Record<keyof T, AnySchema>, AnyObject>>>'.
      Type 'FieldValues' is not assignable to type 'MakeKeysOptional<_<{} & TypeFromShape<Record<keyof T, AnySchema>, AnyObject>>>'

I tried making some changes based on the release notes, but it didn’t work.

...
  } = useForm({
    defaultValues: stripNulls(defaultValues) as DefaultValues<T>,
    resolver: yupResolver(schema),
    mode: validateMode,
  });

About this issue

Original URL
State: open
Created 7 months ago
Reactions: 20
Comments: 22 (1 by maintainers)

Most upvoted comments

You can try this option:

...
    } = useForm({
        defaultValues: stripNulls(defaultValues) as DefaultValues<T>,
        resolver: yupResolver(schema) as unknown as Resolver<T>,
        mode: validateMode,
    });

JStatik on Apr 11, 2024

I think the issue start appearing after this commit: https://github.com/react-hook-form/resolvers/commit/918d72f58ab560546e8bf367896bd2ee6bb20ce1, but IMHO the resolver is fine, but problem lies in RHF typings. I reported it here: https://github.com/react-hook-form/react-hook-form/issues/11686

supersnager on Mar 17, 2024

If it worked before and now it doesn’t, it’s a problem with the library, not how we’re using it.

cgallo-multiplica on Mar 7, 2024

Still facing this issue as well.

Node: v20.12.2

{
  "yup": "^1.4.0",
  "typescript": "~5.4.2",
  "@hookform/resolvers": "^3.3.4",
  "react-hook-form": "^7.51.3",
}

egdelwonk on Apr 26, 2024

@yamatsum something like the following, though you might need to do a little shuffling around since you’re wrapping this all and using the generic.

useForm<InferType<typeof schema>>()

brianbattenfeld on Feb 21, 2024

Okay now i’m gonna sound like generic tech support, but did you try shutting it off and turning it back on again?

I removed my node_modules and re-installed all my dependencies and what gave me errors before no longer does.

"dependencies": {
  "react-hook-form": "^7.49.2",
  "yup": "1.3.3",
  "@hookform/resolvers": "^3.3.3",
  ...
}

now i have

import * as yup from "yup";

export const generateSchema = () =>
  yup
    .object({
      obj: yup.object({
        prop1: yup.string().required(),
        prop2: yup.string().required(),
      }),
    })
    .required();

and i’m able to use it like

  const methods = useForm({
    resolver: yupResolver(generateSchema()),
  });

Where ts was previously complaining about generateSchema() missing fields it is no longer doing so. I realise though that i did not share your original issue so if this is irrelevant please ignore.

tjelvar-chromaway on Jan 4, 2024

@greeeg That post was posted by me with the same content.

yamatsum on Jan 4, 2024

i’m able to use @hookform/resolvers: 3.3.3 with yup: 0.32.11 but with any newer version of yup than that, it breaks. Just basing off of the quick start yup example https://www.npmjs.com/package/@hookform/resolvers#yup (but without using .shape(...). With it it does not work with these versions either.

edit: solved my issue https://github.com/react-hook-form/resolvers/issues/648#issuecomment-1876689228

tjelvar-chromaway on Jan 4, 2024