typescript type error for yupResolver #648

ya2s · 2023-11-24T13:32:26Z

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

The text was updated successfully, but these errors were encountered:

jorisre · 2023-12-13T08:27:55Z

Can you provide a Codesandbox with the issue? thank you

Hujianboo · 2023-12-15T06:52:40Z

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

ya2s · 2023-12-16T00:57:59Z

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

greeeg · 2024-01-03T08:50:11Z

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 · 2024-01-03T16:21:36Z

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 #648 (comment)

ya2s · 2024-01-04T01:45:52Z

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

tjelvar-chromaway · 2024-01-04T08:21:17Z

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 · 2024-01-04T08:47:04Z

@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 · 2024-01-04T08:58:05Z

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

ya2s · 2024-01-04T12:33:09Z

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

Zerebokep · 2024-01-04T17:56:46Z

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 · 2024-01-26T15:42:10Z

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.

ya2s · 2024-02-21T08:26:22Z

@brianbattenfeld
In this case, how can I use yup.InferType to solve the problem?
#648 (comment)

brianbattenfeld · 2024-02-21T22:01:21Z

@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 · 2024-03-07T19:10:56Z

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

supersnager · 2024-03-17T13:29:17Z

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

lucamartins · 2024-03-22T00:28:10Z

Same problem here.

vincent-vdl · 2024-03-24T12:30:02Z

Also facing this issue.

mikecousins · 2024-04-05T18:27:13Z

Same here.

JStatik · 2024-04-11T20:31:35Z

You can try this option:

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

japusoy · 2024-04-24T10:04:01Z

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

jquense/yup#1222 (comment)

egdelwonk · 2024-04-26T09:04:04Z

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 · 2024-06-03T16:23:46Z

also facing this issue, has a fix been found?

ManojkannaMuthukrish98 · 2024-06-27T10:46:43Z

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 · 2024-07-08T14:58:00Z

The issue seems to be coming from the return type update made in #625
Poke @kotarella1110

Zerebokep · 2024-07-09T08:08:17Z

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 · 2024-08-02T14:27:31Z

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.

alioshr · 2024-12-18T19:32:39Z

I believe that the issue is on the clojure types... using yup MakeKeysOptional generic.

The types for data & options are forced to be optional, when they should not, as RHF does not force them as optional. I created a decorator around this resolver so I can have cross-app internationalization implementation and have inspected a little bit of the code.

Type 'Resolver<{ sensor?: number; car?: number; }>' is not assignable to type 'Resolver<{ car: number; sensor: number; }, any>'.
  Types of parameters 'options' and 'options' are incompatible.
    Type 'ResolverOptions<{ car: number; sensor: number; }>' is not assignable to type 'ResolverOptions<{ sensor?: number; car?: number; }>'.
      Type '{ sensor?: number; car?: number; }' is not assignable to type '{ car: number; sensor: number; }'.
        Property 'car' is optional in type '{ sensor?: number; car?: number; }' but required in type '{ car: number; sensor: number; }'.ts(2322)
form.d.ts(68, 5): The expected type comes from property 'resolver' which is declared here on type 'Partial<{ mode: "onBlur" | "onChange" | "onSubmit" | "onTouched" | "all"; disabled: boolean; reValidateMode: "onBlur" | "onChange" | "onSubmit"; defaultValues: AsyncDefaultValues<{ car: number; sensor: number; }> | { ...; }; ... 10 more ...; delayError: number; }>'

nathanpower · 2025-01-03T05:41:13Z

Same issue here - pinning to 3.1.0 for now, as that works as before. The new behaviour seems to expect that the type inferred from the Yup schema is the same as the type passed to the useForm generic - which does not really match how we use it currently.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

typescript type error for yupResolver #648

typescript type error for yupResolver #648

ya2s commented Nov 24, 2023 •

edited

Loading

jorisre commented Dec 13, 2023

Hujianboo commented Dec 15, 2023

ya2s commented Dec 16, 2023

greeeg commented Jan 3, 2024

tjelvar-chromaway commented Jan 3, 2024 •

edited

Loading

ya2s commented Jan 4, 2024

tjelvar-chromaway commented Jan 4, 2024

greeeg commented Jan 4, 2024

tjelvar-chromaway commented Jan 4, 2024 •

edited

Loading

ya2s commented Jan 4, 2024

Zerebokep commented Jan 4, 2024

brianbattenfeld commented Jan 26, 2024 •

edited

Loading

ya2s commented Feb 21, 2024

brianbattenfeld commented Feb 21, 2024

cgallo-multiplica commented Mar 7, 2024

supersnager commented Mar 17, 2024

lucamartins commented Mar 22, 2024

vincent-vdl commented Mar 24, 2024

mikecousins commented Apr 5, 2024

JStatik commented Apr 11, 2024 •

edited

Loading

japusoy commented Apr 24, 2024

egdelwonk commented Apr 26, 2024

Supcar27 commented Jun 3, 2024

ManojkannaMuthukrish98 commented Jun 27, 2024 •

edited

Loading

greeeg commented Jul 8, 2024

Zerebokep commented Jul 9, 2024

migratingcub commented Aug 2, 2024

alioshr commented Dec 18, 2024 •

edited

Loading

nathanpower commented Jan 3, 2025

typescript type error for yupResolver #648

typescript type error for yupResolver #648

Comments

ya2s commented Nov 24, 2023 • edited Loading

jorisre commented Dec 13, 2023

Hujianboo commented Dec 15, 2023

ya2s commented Dec 16, 2023

greeeg commented Jan 3, 2024

tjelvar-chromaway commented Jan 3, 2024 • edited Loading

ya2s commented Jan 4, 2024

tjelvar-chromaway commented Jan 4, 2024

greeeg commented Jan 4, 2024

tjelvar-chromaway commented Jan 4, 2024 • edited Loading

ya2s commented Jan 4, 2024

Zerebokep commented Jan 4, 2024

brianbattenfeld commented Jan 26, 2024 • edited Loading

ya2s commented Feb 21, 2024

brianbattenfeld commented Feb 21, 2024

cgallo-multiplica commented Mar 7, 2024

supersnager commented Mar 17, 2024

lucamartins commented Mar 22, 2024

vincent-vdl commented Mar 24, 2024

mikecousins commented Apr 5, 2024

JStatik commented Apr 11, 2024 • edited Loading

japusoy commented Apr 24, 2024

egdelwonk commented Apr 26, 2024

Supcar27 commented Jun 3, 2024

ManojkannaMuthukrish98 commented Jun 27, 2024 • edited Loading

greeeg commented Jul 8, 2024

Zerebokep commented Jul 9, 2024

migratingcub commented Aug 2, 2024

alioshr commented Dec 18, 2024 • edited Loading

nathanpower commented Jan 3, 2025

ya2s commented Nov 24, 2023 •

edited

Loading

tjelvar-chromaway commented Jan 3, 2024 •

edited

Loading

tjelvar-chromaway commented Jan 4, 2024 •

edited

Loading

brianbattenfeld commented Jan 26, 2024 •

edited

Loading

JStatik commented Apr 11, 2024 •

edited

Loading

ManojkannaMuthukrish98 commented Jun 27, 2024 •

edited

Loading

alioshr commented Dec 18, 2024 •

edited

Loading