typescript type error for yupResolver

yamatsum commented 9 months ago

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,
  });

jorisre commented 8 months ago

Can you provide a Codesandbox with the issue? thank you

Hujianboo commented 8 months ago

I have the same problem in version 3.0 plus. You can change the export interface CreateFormOptions<T> { rules: Record<keyof T, yup.AnySchema>; defaultValues?: DefaultValues<T>; validateMode?: Mode; }
to
export interface CreateFormOptions<T> { rules: Record<keyof T, yup.AnySchema>; defaultValues: DefaultValues<T> | undefined; validateMode: Mode | undefined; } It worked for me

yamatsum commented 8 months ago

@jorisre @Hujianboo thank you for your reply The method you suggested didn't fix it.

greeeg commented 7 months ago

StackOverflow issue mentioning the same generic issue since upgrading: https://stackoverflow.com/questions/77593266/the-react-hook-forms-yup-resolver-is-upgraded-and-causes-a-type-error

tjelvar-chromaway commented 7 months ago

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

yamatsum commented 7 months ago

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

tjelvar-chromaway commented 7 months ago

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.

greeeg commented 7 months ago

@tjelvar-chromaway We would need your yarn.lock or package-lock.json file to see what exact versions you're using to explain why it works on your side.

On my side, in the CI with pinned versions, it does not work consistently

tjelvar-chromaway commented 7 months ago

@greeeg Got the same versions in the lock file

  '@hookform/resolvers':
    specifier: ^3.3.3
    version: 3.3.3(react-hook-form@7.49.2)

   react-hook-form:
    specifier: ^7.49.2
    version: 7.49.2(react@18.2.0)

   yup:
    specifier: 1.3.3
    version: 1.3.3

(deleted both node_modules and my lock file and re-installed everything)

yamatsum commented 7 months ago

I deleted node_modules and also deleted the lock file, but the error remained.

Zerebokep commented 7 months ago

I have the same problem, as soon as I use Fieldvalues as parameter, typescript complains that the types of the schema doesn't match. This started at > 3.1.0, I'm also using yup.

brianbattenfeld commented 7 months ago

Similar issue here. Brand new to this so it didn't become broken after an upgrade but after downgrading to the versions mentioned by @yamatsum, this works as expected according to the docs.

I was able to work around it for the time being by using yup.InferType, but this likely won't work for everyone's use cases and I'm not entirely sure yet how trustworthy these results will be.

yamatsum commented 6 months ago

@brianbattenfeld In this case, how can I use yup.InferType to solve the problem? https://github.com/react-hook-form/resolvers/issues/648#issuecomment-1858650037

brianbattenfeld commented 6 months ago

@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>>()

cgallo-multiplica commented 5 months ago

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

supersnager commented 5 months ago

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

lucamartins commented 5 months ago

Same problem here.

vincent-vdl commented 5 months ago

Also facing this issue.

mikecousins commented 4 months ago

Same here.

JStatik commented 4 months ago

You can try this option:

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

japusoy commented 4 months ago

Was able to fix it.

from

const validationSchema = Yup.object().shape({
  email: Yup.string().email().required(errors.field),
  password: Yup.string().required(errors.field).min(5),
});

to

const validationSchema = Yup.object({
  email: Yup.string().email().required(errors.field),
  password: Yup.string().required(errors.field).min(5),
});

https://github.com/jquense/yup/issues/1222#issuecomment-761213738

egdelwonk commented 4 months ago

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",
}

Supcar27 commented 2 months ago

also facing this issue, has a fix been found?

ManojkannaMuthukrish98 commented 2 months ago

I am getting error like this "Argument of type 'ObjectSchema<{ sourceName: string; ingestionFor: string; ingestionType: string; ingestAssetDetails: { key?: string | undefined; value?: string | undefined; fixedInterval?: string | undefined; addTo?: string | undefined; mrssURL: string; } | Maybe<...>; ... 9 more ...; epgFTPDetails: AnyPresentValue; }, AnyObject, { ...' is not assignable to parameter of type 'AnyObjectSchema | Lazy<any, unknown>'"

"yup": "^1.0.0", "react-hook-form": "^7.51.5", "@hookform/resolvers": "^3.3.1"

greeeg commented 1 month ago

The issue seems to be coming from the return type update made in https://github.com/react-hook-form/resolvers/pull/625 Poke @kotarella1110

Zerebokep commented 1 month ago

Nope, imo it started with 3.1.1 (https://github.com/react-hook-form/resolvers/releases/tag/v3.1.1), @yamatsum could you please try 3.1.0 to verify?

The "after" excerpt of the release notes works fine with 3.1.0, but not with 3.1.1+ in my codebase, I've also seen similar problems in other issues starting with 3.1.1.

migratingcub commented 3 weeks ago

I was able to solve this with the following:

"@hookform/resolvers": "^3.9.0",
"react-hook-form": "^7.52.1",
"yup": "^1.4.0"

export interface IDocumentConfiguration extends FieldValues {
    id: number
    isDefault: boolean
    isActive: boolean
    name: string
....

export const DocumentConfigurationResolver: yup.ObjectSchema<IDocumentConfiguration> = yup.object().shape({
    id: yup.number().required(),
    isDefault: yup.boolean().required(),
    isActive: yup.boolean().required(),
    name: yup.string().required(),

<SimpleForm
    onSubmit={onSubmit}
    defaultValues={initialDocumentConfigurationValues}
    resolver={yupResolver(DocumentConfigurationResolver)}
...

By extending my interface with FieldValues, the error disappeared. Seems like too simple of a fix and I have my suspicions of issues later down the road, but hopefully this helps someone.

react-hook-form / resolvers

typescript type error for yupResolver #648