I'm having difficulty updating some old ReactJs code written in version 16 to 18, along with the Yup package also being updated (0.26.6 -> 1.2.0), as it seems some of the syntax rules for this were changed and I'm getting strange errors I'm having trouble diagnosing and fixing.

import helpers from '../../../Shared/validationHelpers';

const { domainName } = helpers.regEx;

export default Yup.object({
    enabled: Yup.boolean(),
    hostname: Yup.string().when('enabled', {
        is: true,
        then: Yup.string()
            .matches(domainName, 'Please provide a fully qualified domain name')
            .required('You must provide a hostname'),
        otherwise: Yup.string().notRequired(),
    }),
});

Helpers is just a file with a bunch of regex definitions, and domainName is regex for setting a domain name.

The error occurs on "is: true":

No overload matches this call.
  Overload 1 of 4, '(keys: string | string[], builder: ConditionBuilder<StringSchema<string, AnyObject, undefined, "">>): StringSchema<string, AnyObject, undefined, "">', gave the following error.
    Argument of type '{ is: boolean; then: Yup.StringSchema<string, Yup.AnyObject, undefined, "">; otherwise: Yup.StringSchema<string, Yup.AnyObject, undefined, "">; }' is not assignable to parameter of type 'ConditionBuilder<StringSchema<string, AnyObject, undefined, "">>'.
      Object literal may only specify known properties, and 'is' does not exist in type 'ConditionBuilder<StringSchema<string, AnyObject, undefined, "">>'.

Any help is much appreciated.

I'm having difficulty updating some old ReactJs code written in version 16 to 18, along with the Yup package also being updated (0.26.6 -> 1.2.0), as it seems some of the syntax rules for this were changed and I'm getting strange errors I'm having trouble diagnosing and fixing.

import helpers from '../../../Shared/validationHelpers';

const { domainName } = helpers.regEx;

export default Yup.object({
    enabled: Yup.boolean(),
    hostname: Yup.string().when('enabled', {
        is: true,
        then: Yup.string()
            .matches(domainName, 'Please provide a fully qualified domain name')
            .required('You must provide a hostname'),
        otherwise: Yup.string().notRequired(),
    }),
});

Helpers is just a file with a bunch of regex definitions, and domainName is regex for setting a domain name.

The error occurs on "is: true":

No overload matches this call.
  Overload 1 of 4, '(keys: string | string[], builder: ConditionBuilder<StringSchema<string, AnyObject, undefined, "">>): StringSchema<string, AnyObject, undefined, "">', gave the following error.
    Argument of type '{ is: boolean; then: Yup.StringSchema<string, Yup.AnyObject, undefined, "">; otherwise: Yup.StringSchema<string, Yup.AnyObject, undefined, "">; }' is not assignable to parameter of type 'ConditionBuilder<StringSchema<string, AnyObject, undefined, "">>'.
      Object literal may only specify known properties, and 'is' does not exist in type 'ConditionBuilder<StringSchema<string, AnyObject, undefined, "">>'.

Any help is much appreciated.

• javascript
• reactjs
• yup

4 Answers 4

As I can't upvote the given response, I'll say that this worked properly. By the way, here is the example using string schema:

companion_name: yup
          .string()
          .when('marital_status', ([marital_status], sch) => {
            return ['C', 'D', 'E'].indexOf(marital_status) > -1
              ? sch
                  .trim()
                  .min(2)
                  .required()
              : sch.notRequired();
          }),

Maybe help you: https://github.com/jquense/yup#schemawhenkeys-string--string-builder-object--values-any-schema--schema-schema

Alternatively you can provide a function that returns a schema, called with an array of values for each provided key the current schema.

let schema = yup.object({
  isBig: yup.boolean(),
  count: yup.number().when('isBig', ([isBig], schema) => {
    return isBig ? schema.min(5) : schema.min(0);
  }),
});

await schema.validate({ isBig: false, count: 4 });

You can also use function as the "issue" with the ConditionConfig

...
        then: (sch) => sch
            .matches(domainName, 'Please provide a fully qualified domain name')
            .required('You must provide a hostname'),
        otherwise: (sch) => sch.notRequired(),
...

i faced it too, But my use case was different,

i need to check a type outside of the Schema.

export const AgentPersonalDetailsSchema = Yup.object().shape({
      EID: Yup.string().when('$agentType', ([agentType]) =>
        agentType === 'local'
          ? Yup.string().required("Required")
          : Yup.string().notRequired(),
      ),
      EIDExpiry: Yup.string().when('$agentType', ([agentType]) =>
        agentType === 'local'
          ? Yup.string().required("Required")
          : Yup.string().notRequired(),
      ),
      
    });

above is my Schema: where i wanted to check for agentType.

and This is how i pssed the context value to check for AgentType

<Formik
      validationSchema={AgentPersonalDetailsSchema}
      initialValues={AgentPersonalDetail}
      onSubmit={submitHandler}
      validate={values =>
        AgentPersonalDetailsSchema.validate(values, {
          context: { agentType: 'local' },
        })
          .then(() => console.log('Validation Passed'))
          .catch(err => console.log('Validation Error:', err))
      }>

Check the validate Function, in this way you can passes values and then use them inside the schema to check for Availability.

validate={values =>
 AgentPersonalDetailsSchema.validate(values, {
 context: { agentType: 'local' },
  })
.then(() => console.log('Validation Passed'))
.catch(err => console.log('Validation Error:', err))
}

Happy coading ✅