typescript type error for yupResolver

[yamatsum]

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]

Can you provide a Codesandbox with the issue? thank you

[Hujianboo]

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]

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

https://codesandbox.io/p/devbox/snowy-browser-xvhgk5?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clq7chv6y000a3b6ilzukmo1k%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clq7chv6x00023b6iebsjsvcy%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clq7chv6x00073b6ice12ck93%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clq7chv6x00093b6iz0zrivb6%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clq7chv6x00023b6iebsjsvcy%2522%253A%257B%2522id%2522%253A%2522clq7chv6x00023b6iebsjsvcy%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clq7ciiep00563b6igqb0rvxy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fcomponents%252FForm.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clq7ciiep00563b6igqb0rvxy%2522%257D%252C%2522clq7chv6x00093b6iz0zrivb6%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clq7chv6x00083b6imqf2d6xb%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clq7chv6x00093b6iz0zrivb6%2522%252C%2522activeTabId%2522%253A%2522clq7chv6x00083b6imqf2d6xb%2522%257D%252C%2522clq7chv6x00073b6ice12ck93%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clq7chv6x00033b6igo5r621i%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522id%2522%253A%2522clq7chv6x00043b6i6oz0lyrd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%252C%257B%2522id%2522%253A%2522clq7chv6x00053b6imsdq6wxa%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522install%2522%257D%252C%257B%2522id%2522%253A%2522clq7chv6x00063b6i8790tguq%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clq7bgw85014pehgebt5w2y9w%2522%257D%255D%252C%2522id%2522%253A%2522clq7chv6x00073b6ice12ck93%2522%252C%2522activeTabId%2522%253A%2522clq7chv6x00033b6igo5r621i%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[greeeg]

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]

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)

[yamatsum]

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

[tjelvar-chromaway]

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]

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

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

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

[Zerebokep]

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]

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]

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

[brianbattenfeld]

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

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

[supersnager]

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]

Same problem here.

[vincent-vdl]

Also facing this issue.

[mikecousins]

Same here.

[JStatik]

You can try this option:

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

[japusoy]

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]

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