React Hook Form Type Instantiation is Excessively Deep and Possibly Infinite

Hey! I'm using React Hook Form, Zod, and tRPC in a T3 stack project, and I keep getting an error on the {...register("name_here")}, here's an example of what one of the code blocks looks like with this error:
const ToggleActive = (props: { id: string; activeFlag: boolean }) => {
const ctx = api.useContext();

const {
register,
handleSubmit,
formState: { errors, isSubmitting: isPosting },
} = useForm<formDataType>({
resolver: zodResolver(Flag),
});

const { mutate } = api.users.toggleActive.useMutation({
onSuccess: async () => {
await ctx.users.getById.invalidate();
},
onError: (e) => {
const errorMessage = e.data?.zodError?.fieldErrors;
if (errorMessage && errorMessage[0]) {
//TODO: Find a better way to get the error messages, consider using the toast
console.log(errorMessage);
}
},
});

const onSubmit: SubmitHandler<formDataType> = () => {
//* Flip the boolean
const flippedFlag = !props.activeFlag;

mutate({ id: props.id, activeFlag: flippedFlag });
};

return (
<form className="py-4" onSubmit={onPromise(handleSubmit(onSubmit))}>
<button
value={String(props.activeFlag)}
className="w-full rounded border border-black bg-blue-200"
type="submit"
disabled={isPosting}
{...register("activeFlag")}
>
{props.activeFlag !== true && "Reactivate "}
{props.activeFlag === true && "Deactivate "}
</button>
<span>{errors.activeFlag?.message}</span>
</form>
);
};
const ToggleActive = (props: { id: string; activeFlag: boolean }) => {
const ctx = api.useContext();

const {
register,
handleSubmit,
formState: { errors, isSubmitting: isPosting },
} = useForm<formDataType>({
resolver: zodResolver(Flag),
});

const { mutate } = api.users.toggleActive.useMutation({
onSuccess: async () => {
await ctx.users.getById.invalidate();
},
onError: (e) => {
const errorMessage = e.data?.zodError?.fieldErrors;
if (errorMessage && errorMessage[0]) {
//TODO: Find a better way to get the error messages, consider using the toast
console.log(errorMessage);
}
},
});

const onSubmit: SubmitHandler<formDataType> = () => {
//* Flip the boolean
const flippedFlag = !props.activeFlag;

mutate({ id: props.id, activeFlag: flippedFlag });
};

return (
<form className="py-4" onSubmit={onPromise(handleSubmit(onSubmit))}>
<button
value={String(props.activeFlag)}
className="w-full rounded border border-black bg-blue-200"
type="submit"
disabled={isPosting}
{...register("activeFlag")}
>
{props.activeFlag !== true && "Reactivate "}
{props.activeFlag === true && "Deactivate "}
</button>
<span>{errors.activeFlag?.message}</span>
</form>
);
};
the formDataType is a prisma object, it's Prisma.UserCreateInput, which is just my user schema in my schema.prisma file. I appreciate any help I can get with this!
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server