Expected 6 arguments, but got 1. in yupResolver

[namdq-2825]

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(
() => ({
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 (



<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')} />

<Stack alignItems="flex-end" sx={{ mt: 3 }}>
<CustomLoadingButton
loading={isSubmitting}
label={isUpdate ? t('university.update_button_label') : t('university.create_button_label')}
onClick={onSubmit}
/>





);
}`

### 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 (



<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')} />

<Stack alignItems="flex-end" sx={{ mt: 3 }}>
<CustomLoadingButton
loading={isSubmitting}
label={isUpdate ? t('university.update_button_label') : t('university.create_button_label')}
onClick={onSubmit}
/>





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

[Sliffcak]

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