yup validation, one of three has to be filled out

I have an issue with some yup validation...
I have a form with a lot of fields - In this form, the user needs to fill in at least one of three fields: Username, Email or Phone

const userSchema = yup
  .object()
  .shape({
    username: yup.string().when(['email', 'phone'], {
      is: (email, phone) => !email && !phone,
      then: yup.string().required('Username is required')
    }),
    email: yup.string().email('Please enter a valid email'),
    phone: yup.string().when(['username', 'email'], {
      is: (username, email) => !username && !email,
      then: yup.string().required('Phone is required')
    }),
    password: yup
      .string()
      .min(8, 'Password must be 8 characters long')
      .matches(/[0-9]/, 'Password requires a number')
      .matches(/[a-z]/, 'Password requires a lowercase letter')
      .matches(/[A-Z]/, 'Password requires an uppercase letter')
      .matches(/[^\w]/, 'Password requires a symbol')
      .required('Password is required')
  })
  .required();

However, Im getting errors on this: index.js:45 Uncaught (in promise) Error: Cyclic dependency

What am i doing wrong?

In yup, it is necessary to arrange dependency fields in a specific order of construction. In your code, username depends on field phone to validate, but phone depends on usename to validate. you must cast and coerce the value in field phone before passing it to field username, or vice versa

In your case, your schema must be something like:

const userSchema = yup
  .object()
  .shape({
  ...
  }, [
  ['username', 'phone'],
  ])

You can read more about it here