Yup: IE11 Error

[Undistraction]

I'm using Yup with Formik and Gatsby, however when the site is loaded in IE11, the Set polyfill throws an error:

Method Set.prototype.add called on incompatible receiver

This error originates from Yups oneOf function. Specifically from the line:

next._whitelist.add(val)

[sbeih]

I'm facing the same issue here, can someone help..?
@jquense

[Undistraction]

@sbeih Unfortunately Gatsby doesn't Polyfill anything in node_modules. It uses babel-preset-env with useBuiltins set to usage, but this only effects user code. If a third party module or a dependency of a third party module needs polyfilling, Gatsby will not supply the necessary polyfill unless user code required it. See issue here: https://github.com/gatsbyjs/gatsby/issues/12399

Unfortunately Gatsby is bugged when using useBuiltins set to entry, so your only options are:

1. Add @babel/polyfill at the entry point of your application and take the hit on size (~100k).
2. Add specific polyfills you need separately.

[Undistraction]

I'm going to close this as it is Gatsby's issue, not Yup's.

[weyert]

I am getting the feeling I am having a similar issue when using Create React App (2.0.8) and trying to use Yup together with Formik under IE11

[kpoelhekke]

We're experiencing the same issue here on Create React App 3.0.1. Following the stack trace the error seems to originate from the same line as @Undistraction mentions.

We're polyfilling Set with polyfill.io, which uses this polyfill: https://github.com/Financial-Times/polyfill-library

@weyert did you manage to get this working yet?

[bpartridge]

Can also confirm this error @kpoelhekke @weyert. It's one of the weirdest bugs I've ever come across. It appears to occur when using ANY polyfill for Set, including if I patch the line var Set = require("es6-set/polyfill"); into the compiled version of https://github.com/jquense/yup/blob/master/src/mixed.js - so it's not an implementation detail specific to a single polyfill!

It's almost as if some code is reaching in and killing the internal storage of the polyfilled Set/Map objects... but it seems that the only usages are in mixed.js, and all of those seem sound. And it works with the native Set available in modern Chrome.

I was able to workaround and get to a POC by replacing Set and Map with [] and {} respectively in mixed.js: search would be slower, so this isn't mergeable yet, but it would work on IE11 with https://polyfill.io/v3/polyfill.js?features=es2015%2Ces2016%2Ces2017 ... would require a fork to use in production though. And it's going to keep me up at night wondering why all these Set/Map polyfills are failing.

var RefSet =
/*#__PURE__*/
function () {
  function RefSet() {
    this.list = [];
    this.refs = {};
  }

  var _proto = RefSet.prototype;

  _proto.toArray = function toArray() {
    return (0, _toArray2.default)(this.list).concat((0, _toArray2.default)(this.refs.values()));
  };

  _proto.add = function add(value) {
    _Reference.default.isRef(value) ? (this.refs[value.key] = value) : this.list.push(value);
  };

  _proto.delete = function _delete(value) {
    _Reference.default.isRef(value) ? (delete this.refs[value.key]) : this.list.splice(this.list.indexOf(value), 1);
  };

  _proto.has = function has(value, resolve) {
    if (this.list.indexOf(value) >= 0) return true;
    var out = Object.values(this.refs).filter(function (o) {return resolve(o) === value;});
    if (out.length) return true;
    return false;
  };

  _proto.clone = function clone() {
    var next = new RefSet();
    next.list = this.list.slice();
    next.refs = Object.assign({}, this.refs);
    return next;
  };

  _proto.merge = function merge(newItems, removeItems) {
    var next = this.clone();
    newItems.list.forEach(function (value) {
      return next.add(value);
    });
    Object.values(newItems.refs).forEach(function (value) {
      return next.add(value);
    });
    removeItems.list.forEach(function (value) {
      return next.delete(value);
    });
    Object.values(removeItems.refs).forEach(function (value) {
      return next.delete(value);
    });
    return next;
  };

  return RefSet;
}();