Search code examples
javascriptreactjsyup

'is' does not exist in type 'ConditionBuilder<StringSchema<string, AnyObject, undefined, "">>' for Yup (ReactJs)


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.


Solution

  • 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();
              }),