React yup validation leads to promise error field.resolve is not a function

Question

I've followed tutorials on yup and tried many ways to do this but don't understand the error on simple form validation. I get the error field.resolve is not a function.

This is the snippet of code inside the onClick function:

const registrationSchema = yup.object().shape({
      username: yup.string().required,
      email: yup.string().email().required,
      password: yup.string().min(0).max(10).required,
    });

    const formData = {
      username: registerUsername,
      email: registerEmail,
      password: registerPassword,
    };

    const answer = registrationSchema.isValid(formData).then(function (valid) {
      console.log("works");
    });

I'm really confused over how and why this is't working.

Answer 1

Your required should be required() like:

const registrationSchema = yup.object().shape({
  username: yup.string().required(),                // <--
  email: yup.string().email().required(),           // <--
  password: yup.string().min(0).max(10).required(), // <--
});

const formData = {
  username: registerUsername,
  email: registerEmail,
  password: registerPassword,
};

const answer = registrationSchema.isValid(formData).then(function (valid) {
  console.log("works");
});

Credit: https://github.com/jaredpalmer/formik/issues/1040#issuecomment-624803999