resolvers
resolvers copied to clipboard
react-hook-form
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,
});
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
@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
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
~~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
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 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
@greeeg Got the same versions in the lock file
'@hookform/resolvers':
specifier: ^3.3.3
version: 3.3.3([email protected])
react-hook-form:
specifier: ^7.49.2
version: 7.49.2([email protected])
yup:
specifier: 1.3.3
version: 1.3.3
(deleted both node_modules and my lock file and re-installed everything)
I deleted node_modules and also deleted the lock file, but the error remained.
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.
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.
@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
@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>>()
If it worked before and now it doesn't, it's a problem with the library, not how we're using it.
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
You can try this option:
...
} = useForm({
defaultValues: stripNulls(defaultValues) as DefaultValues<T>,
resolver: yupResolver(schema) as unknown as Resolver<T>,
mode: validateMode,
});
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
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",
}
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"
The issue seems to be coming from the return type update made in https://github.com/react-hook-form/resolvers/pull/625 Poke @kotarella1110
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.
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.
