react hook form uncaught promise error with email field NextJS

Question

I am experiencing very strange error, I have two fields registered , name and email, when the email field gets "triggered" I mean whether it gets focused when I call onSubmit I get

content.js:1 Uncaught (in promise) Error: Something went wrong. Please check back shortly.
    at g (content.js:1:1239606)

does not matter if its empty thus not validated, or filled and not validated, or validated properly, whenever I call onSubmit I get this error. Its problematic because users report that on some devices they don't seem to be able to click this button. The only way to get rid of this error is to remove onSubmit from the form, apart that this one field seems to be causing the error at all times I have tried to follow this issue https://github.com/react-hook-form/react-hook-form/issues/1367 but with no luck, this is the code :

const confirmedGuestFormSchema = yup.object({
  name: yup.string().required("To pole jest wymagane"),
  email: yup
    .string()
    .email("Pole musi być poprawnym adresem email")
    .required("To pole jest wymagane"),
});

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<ConfirmedGuestFormData>({
    resolver: yupResolver(confirmedGuestFormSchema),
    mode: "onBlur",
  });

  const onSubmit = handleSubmit(async (data, e) => {
    console.log({ data });

    // const response = await fetch("/api/send-email-to-guests", {
    //   method: "POST",
    //   body: JSON.stringify(data),
    // });
    // const { message } = JSON.parse(await response.text());
    // if (response.ok) {
    // setModalOpen(true);
    // setConfirmation(message);
    // reset();
    // }
  });

 <form className="mx-auto" onSubmit={onSubmit}>
     <div className="mb-5">
       <label htmlFor="name" className="form-label d-none">
         Imię i Nazwisko
       </label>
       <input
         type="text"
         className="form-control rounded-0 border-white bg-white-transparent"
         id="name"
         placeholder="Imię i Nazwisko"
         {...register("name")}
       />
       <span className="text-xs font-thin mt-1 h-2 block text-red-600">
         {errors.name?.message}
       </span>
     </div>
     <div className="mb-5">
       <label htmlFor="email" className="form-label d-none">
         Adres email
       </label>
       <input
         type="email"
         className="form-control rounded-0 border-white bg-white-transparent"
         id="email"
         placeholder="Adres email"
         {...register("email")}
       />
       <span className="text-xs font-thin mt-1 h-2 block text-red-600">
         {errors.email?.message}
       </span>
     </div>
     <div className="mb-3 form-check">
       <input
         type="checkbox"
         className="form-check-input rounded-0 border-white bg-white-transparent"
         id="rodo"
         required
       />
     </div>
     <button
       type="submit"
       className="btn btn-white w-100 rounded-0 text-uppercase py-3"
     >
       Potwierdzam Obecność
     </button>
   </form>;

Thanks

Answer 1

Hey I had the same error recently on my React app, it occurred every time I submitted the form. I opened the app in incognito and the error went away.

I eventually figured out that it was one of the extensions that I had on google chrome causing the error most likely nordPass as it probably tried to prefill some of the fields but because I didn't sign in the request failed and caused an uncaught promise error.

Not sure if it's the solution to your issue but definitely worth a try.