Expected 6 arguments, but got 1. in yupResolver

[namdq-2825]

trafficstars

Describe the bug i got this bug in my next app

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

• Dependencies
  • "@hookform/resolvers": "3.3.2",
  • "react": "18.2.0",
  • "typescript": "5.1.6",
  • "yup": "1.3.2"
  • "react-hook-form": "7.48.2",

[arminsalcin]

+1

[OldManMeta]

Yeah, something not right here at all.

[arminsalcin]

Btw downgrade helps for now..

[OldManMeta]

Btw downgrade helps for now..

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

[Jay14052001]

I was facing the same issue pls give me a accurate answer which library version i can downgrade or upgrade @arminsalcin @OldManMeta

[jorisre]

Can you provide a Codesandbox with the issue?

[Jay14052001]

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<University>( () => ({ name: currentUniversity?.name || '', address: currentUniversity?.address || '', phoneNumber: currentUniversity?.phoneNumber || '', email: currentUniversity?.email || '', }), [currentUniversity], );

const methods = useForm<University>({ 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 ( <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}> <Grid container spacing={3}> <Grid item xs={12} md={12}> <Box sx={{ p: 3 }}> <Box sx={{ display: 'grid', columnGap: 2, rowGap: 3, gridTemplateColumns: { xs: 'repeat(1, 1fr)', sm: 'repeat(2, 1fr)' }, }} > <RHFTextField name={'name'} label={t('university.form_fields.name.placeholder')} /> <RHFTextField name={'email'} label={t('university.form_fields.email.placeholder')} /> <RHFTextField name={'address'} label={t('university.form_fields.address.placeholder')} /> <RHFTextField name={'phoneNumber'} label={t('university.form_fields.phone_number.placeholder')} /> </Box> <Stack alignItems="flex-end" sx={{ mt: 3 }}> <CustomLoadingButton loading={isSubmitting} label={isUpdate ? t('university.update_button_label') : t('university.create_button_label')} onClick={onSubmit} /> </Stack> </Box> </Grid> </Grid> </FormProvider> ); }`

### 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<University>( () => ({ 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<University>({ 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 ( <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}> <Grid container spacing={3}> <Grid item xs={12} md={12}> <Box sx={{ p: 3 }}> <Box sx={{ display: 'grid', columnGap: 2, rowGap: 3, gridTemplateColumns: { xs: 'repeat(1, 1fr)', sm: 'repeat(2, 1fr)' }, }} > <RHFTextField name={'name'} label={t('university.form_fields.name.placeholder')} /> <RHFTextField name={'email'} label={t('university.form_fields.email.placeholder')} /> <RHFTextField name={'address'} label={t('university.form_fields.address.placeholder')} /> <RHFTextField name={'phoneNumber'} label={t('university.form_fields.phone_number.placeholder')} /> </Box> <Stack alignItems="flex-end" sx={{ mt: 3 }}> <CustomLoadingButton loading={isSubmitting} label={isUpdate ? t('university.update_button_label') : t('university.create_button_label')} onClick={onSubmit} /> </Stack> </Box> </Grid> </Grid> </FormProvider> ); } ` Compare both the solution you can find what we have changed and solved this Problem

[SawkaDev]

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]

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]

any update on this issue

[chsdwn]

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]

+1

[chsdwn]

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

[trieuquang204]

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

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

[jorisre]

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