Yup: Yup.ref() not working in IE11

[weyert]

I am trying to get a schema like shown below to work in IE11. The validation rules use Yup.ref() which seems to cause errors when used in IE11. I am polyfilling IE11 using the following script:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?excludes=Object.setPrototypeOf,Map,Set&features=fetch,es2015,es2016,es2017,es2018,es6,es5,default-3.6"></script>

If I am trying to use Yup.ref('password') I am getting the following runtime error: TypeError Object doesn't support property or method 'values'

The schema I am using is:

import * as Yup from 'yup'
import isEmpty from 'lodash/isEmpty'

export const MySettingsSchema = Yup.object().shape({
    currentPassword: Yup.string(),
    password: Yup.string().when('currentPassword', (value, schema) => {
        if (isEmpty(value)) {
            return schema.notRequired()
        }

        return schema.min(8, 'Must be at least 8 characters')
                     .matches(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/, { message: 'Must contain at least 1 uppercase letter, 1 lowercase letter, and 1 number and least 8 characters', excludeEmptyString: true })
                     .required('Required')
    }),
    confirmPassword: Yup.string().when('currentPassword', (value, schema) => {
        if (isEmpty(value)) {
            return schema.notRequired()
        }

        return schema.oneOf([Yup.ref('password')], 'Please confirm the password').required('Required')
    })
})

export default MySettingsSchema```

I can resolve this runtime error by using `test`-method like this: 

return schema.test('is-same-password', 'Please confirm the password', function(value) {
return value === this.parent.password
}).required('Required')
```

As you can understand I would prefer to use Yup.ref instead. I am not sure how I can fix this problem? Could something like lodash used by Yup cause problems?

I am use Create React App (react-scripts) version 2.1.8
Yup version: ^0.27.0

[wojtekgalaj]

Try adding a polyfill for Object.values, the one you are using doesn't seem to patch that in. There's one here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values#Polyfill

[kevinmook]

I'm encountering this issue with IE11 as well. If I polyfill Object.values I still get this error: "Method Map.prototype.set called on incompatible receiver [object Object]"

My polyfill:

<script src="https://polyfill.io/v3/polyfill.min.js?flags=always&features=default%2CObject.values%2Ces2015%2Ces2016%2Ces2017"></script>

[weyert]

Yeah, I haven't found a good solution to make it work with IE11 using polyfills.

[erickbelfy]

@weyert this is actually an issue with Map() object, if you dig in the code, Yup uses Map() class to generate refs. To solve it you can add the polyfill for Map and you're be fine. Just look at https://github.com/zloirock/core-js repo and look how can you import it.

[weyert]

Hmm, I will give this a try. Thanks! :D