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

Question

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.

Saturant

Answer 1

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

Elsie

Answer 2

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 });

Bookseller

Answer 3

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(),
...

Heligoland