formik: TypeError: Cannot read property 'length' of undefined when using Yup.addMethod()

For those coming after me, what I realized is that the yup test method actually doesn’t accept an arrow function.

Doesn’t work:

                confirmPassword: Yup.string()
                .min(6, 'Password must be at least 6 characters')
                .test('passwords-match', 'Password Confirmation must match', value => {
                  if (!value) {
                    return false;
                  }
                  return this.parent.password === value;
                })
                .required('Password Confirmation is required.')

Works:

                confirmPassword: Yup.string()
                .min(6, 'Password must be at least 6 characters')
                .test('passwords-match', 'Password Confirmation must match', function(value) {
                  if (!value) {
                    return false;
                  }
                  return this.parent.password === value;
                })
                .required('Password Confirmation is required.')

What @fullmetalsheep wrote helped me in one case. Other case was that my custom string().test() method had an error inside and crashed silently resulting in this message. See inside all your custom test() methods if they do not crash (In my case I didn’t handle undefined value passed to it)

@tannerhallman actually, it’s not that it doesnt accept arrow functions. It’s because you’re referencing this inside of your arrow function. this does NOT have the proper Yup context so it errors out.

reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Invoked_through_call_or_apply

So this happens when you has an error in your custom validation function

In my case the error was

Cannot read property 'replace' of undefined

So yup will throw here https://github.com/jaredpalmer/formik/blob/c5243947fcf21cd873dd86b57689a30ffc46eab8/src/Formik.tsx#L258

if there is real validation errors or if there is an error in the validation function

so this will throw https://github.com/jaredpalmer/formik/blob/c5243947fcf21cd873dd86b57689a30ffc46eab8/src/Formik.tsx#L683

We can check if yupError has inner, and if not, we should show the error to end user

what do you guys think of this solution?

@raq929 , @nathanhannig

Make sure the specific property of initialValues you’re checking inside the validationSchema is also present inside the validationSchema.

See this answer for an example: https://stackoverflow.com/questions/49394391/conditional-validation-in-yup?rq=1

@deadcoder0904 the error could be coming from the regex that you used to validate password, instead of using quote around the regex (‘{regex}’) trying using forward slash (/{regex}/) before: Password: yup.string().matches('^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]$').required(),

after: Password: yup.string().matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]$/).required(),

see the doc for reference: https://github.com/jquense/yup#stringmatchesregex-regex-message-string--function-schema

@deadcoder0904 maybe try replacing ‘Confirm Password’ with something like confirmPass? I’m currently travelling and have no method of testing code sorry 😦