react-hook-form / resolvers

📋 Validation resolvers: Yup, Zod, Superstruct, Joi, Vest, Class Validator, io-ts, Nope, computed-types, typanion, Ajv, TypeBox, ArkType, Valibot, effect-ts and VineJS
https://react-hook-form.com/
MIT License
1.71k stars 155 forks source link

Expected 6 arguments, but got 1. in yupResolver #643

Open namdq-2825 opened 9 months ago

namdq-2825 commented 9 months ago

Describe the bug i got this bug in my next app

Screen Shot 2023-11-10 at 15 43 37

Expected 6 arguments, but got 1.ts(2554) yup.d.ts(3, 138): An argument for '' was not provided.

Screen Shot 2023-11-10 at 16 03 10

arminsalcin commented 9 months ago

+1

OldManMeta commented 8 months ago

Yeah, something not right here at all.

arminsalcin commented 8 months ago

Btw downgrade helps for now..

OldManMeta commented 8 months ago

Btw downgrade helps for now..

Yep - unfortunately I went back down to 2.19.11 I think it was.

Jay14052001 commented 8 months ago

I was facing the same issue pls give me a accurate answer which library version i can downgrade or upgrade @arminsalcin @OldManMeta Screenshot from 2023-12-13 10-35-49

jorisre commented 8 months ago

Can you provide a Codesandbox with the issue?

Jay14052001 commented 8 months ago

I can solve this issue by this code added to my code

Old code

`//import all the statement const { createUniversity } = universityApi.endpoints;

export default function UniversityForm({ currentUniversity, isUpdate, onClose }: UniversityFormProps) { const { t } = useTranslation(); const dispatch = useDispatch<ThunkDispatch<RootState, undefined, UniversityActionTypes>>(); const defaultValues = useMemo( () => ({ name: currentUniversity?.name || '', address: currentUniversity?.address || '', phoneNumber: currentUniversity?.phoneNumber || '', email: currentUniversity?.email || '', }), [currentUniversity], );

const methods = useForm({ resolver: yupResolver(CreateUniversitySchema), defaultValues, mode: 'all', });

const { updateUniversity, isLoading, error, data } = useUpdateUniversityMutation(); const { alertSuccess, alertError } = useSnackBar();

const { reset, handleSubmit, trigger, watch, formState: { isSubmitting }, } = methods;

const values = watch();

useEffect(() => { if (isUpdate && currentUniversity) { reset(defaultValues); } if (!isUpdate) { reset(defaultValues); } }, [isUpdate, currentUniversity]);

const onSubmit = async () => { if (!isUpdate) { create(); } else { update(); } };

const create = async () => { try { trigger().then(async (isValid) => { if (isValid) { dispatch(createUniversity(values)).then(() => { reset(defaultValues); dispatch(alertSuccess(t('university.create_success_message'))); onClose(); }); } }); } catch (err) { dispatch(alertError(t('common.something_wrong_happend'))); console.error(err); } };

const update = async () => { try { trigger().then(async (isValid) => { if (isValid && currentUniversity?.id) { updateUniversity(currentUniversity.id, values).then(() => { dispatch(alertSuccess(t('university.update_success_message'))); reset(defaultValues); onClose(); }); } }); } catch (err) { dispatch(alertError(t('common.something_wrong_happend'))); } };

return (

); }`

### This is my new code with the solution

`//import all the statement

type University = { name: string; email: string; address: string; phoneNumber: string; };

const { createUniversity } = universityApi.endpoints;

export default function UniversityForm({ currentUniversity, isUpdate, onClose }: UniversityFormProps) { const { t } = useTranslation(); const dispatch = useDispatch<ThunkDispatch<RootState, undefined, UniversityActionTypes>>(); const defaultValues = useMemo( () => ({ name: currentUniversity?.name || '', address: currentUniversity?.address || '', phoneNumber: currentUniversity?.phoneNumber || '', email: currentUniversity?.email || '', }), [currentUniversity], );

// console.log("defaultValues", defaultValues)

const formData = { name: '', email: '', address: '', phoneNumber: '', };

const methods = useForm({ resolver: yupResolver( CreateUniversitySchema, [formData.name, formData.email, formData.address, formData.phoneNumber], CreateUniversitySchema, 'Invalid Input', 'type', formData, ), defaultValues: defaultValues, mode: 'all', });

const { updateUniversity, isLoading, error, data } = useUpdateUniversityMutation(); const { alertSuccess, alertError } = useSnackBar();

const { reset, handleSubmit, trigger, watch, formState: { isSubmitting }, } = methods;

const values = watch();

useEffect(() => { if (isUpdate && currentUniversity) { reset(defaultValues); } if (!isUpdate) { reset(defaultValues); } }, [isUpdate, currentUniversity]);

const onSubmit = async () => { if (!isUpdate) { create(); } else { update(); } };

const create = async () => { try { trigger().then(async (isValid) => { if (isValid) { dispatch(createUniversity(values)).then(() => { reset(defaultValues); dispatch(alertSuccess(t('university.create_success_message'))); onClose(); }); } }); } catch (err) { dispatch(alertError(t('common.something_wrong_happend'))); console.error(err); } };

const update = async () => { try { trigger().then(async (isValid) => { if (isValid && currentUniversity?.id) { updateUniversity(currentUniversity.id, values).then(() => { dispatch(alertSuccess(t('university.update_success_message'))); reset(defaultValues); onClose(); }); } }); } catch (err) { dispatch(alertError(t('common.something_wrong_happend'))); } };

return (

); } ` Compare both the solution you can find what we have changed and solved this Problem

Sliffcak commented 8 months ago

Same issue

This is what my schema looks like

export const yup_TYPESCRIPTINTERFACE: SchemaOf<TYPESCRIPTINTERFACE> = yup.object().shape({
...
})

This is how I am using the schema with yupResolver

  const methods = useForm<TYPESCRIPTINTERFACE>({
    resolver: yupResolver(yup_TYPESCRIPTINTERFACE),
  });

This is the error I get

Type error: Type 'Resolver<AssertsShape<{ NAME: BaseSchema<Maybe<Nullable<string>>, AnyObject, Nullable<string>>; IDENTIFIER: BaseSchema<Maybe<Nullable<string>>, AnyObject, Nullable<...>>; ... 10 more ...; createdAt: BaseSchema<...>; }>, any>' is not assignable to type 'Resolver<TYPESCRIPTINTERFACE, any>'.
  Types of parameters 'values' and 'values' are incompatible.
    Type 'TYPESCRIPTINTERFACE' is not assignable to type 'AssertsShape<{ NAME: BaseSchema<Maybe<Nullable<string>>, AnyObject, Nullable<string>>; IDENTIFIER: BaseSchema<Maybe<Nullable<string>>, AnyObject, Nullable<...>>; ... 10 more ...; createdAt: BaseSchema<...>; }>'.
bagasmdputra commented 8 months ago

I got the same issue

the dependencies

        "@hookform/resolvers": "3.3.2",
        "react-hook-form": "7.49.2",
        "yup": "1.3.3"

this is my yup object

const schema = {
  pin: yup.string().label('challengerService_PIN').required(),
};

export const pinFormSchema = yup.object(schema).required();

export type PinFormData = yup.InferType<typeof pinFormSchema>;

this is my useForm

  const { control, reset, watch, handleSubmit } = useForm<PinFormData>({
    mode: 'onChange',
    defaultValues: defaultInitialValues,
    resolver: yupResolver(pinFormSchema),
  });

The error:

Expected 6 arguments, but got 1.ts(2554)
yup.d.ts(3, 138): An argument for '' was not provided.
(alias) yupResolver<FieldValues>(schema: any, : any, Yup: any, ObjectSchema: any, : any, TFieldValues: any): any
import yupResolver
ranshine commented 6 months ago

any update on this issue

chsdwn commented 6 months ago

I've fixed it by downgrading @hookform/resolvers version to 3.1.1.

{
  "@hookform/resolvers": "3.1.1",
  "react-hook-form": "7.49.3",
  "yup": "^1.3.3",
  "typescript": "^5.3.3"
}
teamzz111 commented 4 months ago

+1

chsdwn commented 4 months ago

Another possible fix for VS Code users is selecting workspace's TypeScript version(Cmd + Shift + P > TypeScript: Select TypeScript Version...).

image
trieuquang204 commented 2 months ago

I dont know why but just add //@ts-ignore to fix this:

const methods = useForm({ //@ts-ignore resolver: yupResolver( object().shape({ phoneNumber: validatePhone, emailName: emailSchema, infoName: infoOptions, }) ), });

jorisre commented 1 month ago

Can you please provide a minimal reproducible example (e.g. a Codesandbox)?