Bootstrap-vue does not work with IE11 due to deepFreeze

[jeuxjeux20]

Describe the bug

Basically, IE11 throws an error: "Symbol is undefined", on the src/utils/object.js file with deepFreeze, which is the transpiled version of for (let prop of props):

export const deepFreeze = obj => {
  // Retrieve the property names defined on object
  const props = getOwnPropertyNames(obj)
  // Freeze properties before freezing self
  for (let prop of props) {
    let value = obj[prop]
    obj[prop] = value && isObject(value) ? deepFreeze(value) : value
  }
  return freeze(obj)
}

The transpiled code in boostrap-vue.esm.js is

var deepFreeze = function deepFreeze(obj) {
  // Retrieve the property names defined on object
  var props = getOwnPropertyNames(obj); // Freeze properties before freezing self

  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = props[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var prop = _step.value;
      var value = obj[prop];
      obj[prop] = value && isObject(value) ? deepFreeze(value) : value;
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return != null) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError; /* this is where the error is */
      }
    }
  }
  return freeze(obj);
};

This is new to the rc23 version.

Steps to reproduce the bug

1. Use bootstrap-vue
2. Use internet explorer

Expected behavior

The error should not happen.

Versions

Libraries:

• BootstrapVue: 2.0.0-rc23
• Bootstrap: 4.3.1
• Vue: 2.6.10

Environment:

• Device: PC
• OS: Windows 10
• Browser: Internet Explorer
• Version: 11 (obviously :D)

[tmorehouse]

Are you importing the latest polyfills for IE (either from polyfill.io or similar)?

[tmorehouse]

We might be able to re-work the routine to make it transpile a bit better.

[tmorehouse]

@jeuxjeux20 The docs recommended polyfill(s) include a polyfill for IE 11 Symbol

https://bootstrap-vue.js.org/docs#js (using @babel/polyfill)

or

https://bootstrap-vue.js.org/docs#browser (using polyfill.io)

[jeuxjeux20]

Yeah i got it to work with a polyfill 👏, though @babel/polyfill was deprecated, i used core-js instead, by importing it: import "core-js"; (typescript) or require('core-js') (javascript)

[Owumaro]

While #3526 solved the IE11 issue with deepFreeze, I'm still having the same issue with the BNavItemDropdown component when I click on it.

I couldn't find why this happens as IE11 doesn't provide much information...

[Vue warn]: Error in v-on handler: "ReferenceError: 'Symbol' is undefined"

Stack:
"ReferenceError: 'Symbol' is undefined
at _iterableToArray (http://10.0.2.2:3000/packs/js/application-af27a7aaa11cf03c733b.js:14565:3)
at _toConsumableArray (http://10.0.2.2:3000/packs/js/application-af27a7aaa11cf03c733b.js:14557:3)
at Anonymous function (http://10.0.2.2:3000/packs/js/application-af27a7aaa11cf03c733b.js:14715:9)
at onClick (http://10.0.2.2:3000/packs/js/application-af27a7aaa11cf03c733b.js:14712:7)
at invokeWithErrorHandling (http://10.0.2.2:3000/packs/js/application-af27a7aaa11cf03c733b.js:66371:5)
at invoker (http://10.0.2.2:3000/packs/js/application-af27a7aaa11cf03c733b.js:66707:7)"

I also noticed there is no issue with the BDropdown component.

Finally the BNavItemDropdown component was working fine in IE11 without the Symbol polyfill when I was using bootstrap-vue@2.0.0-rc.19. Seems like it stopped working with rc.20.

That's all the information I could get, hope this helps.