ChildNode.remove() polyfill with babel-polyfill

Question

I am using ChildNode.remove() and I described by Mozilla I need a polyfill for IE. I am using webpack with the babel-polyfill configured:

 "babel-polyfill": "^6.13.0",
 "webpack": "^2.4.1",

webpack.config.babel.js:

    entry: ['babel-polyfill', join(__dirname, path, "index.web.js") ],

My assumption was that babel-polyfill would provide me all the common polyfill I needed - but it is not, I have an error in Internet Explorer 11. Is there another config I missed?

Thank you

Answer 1

As an alternative to (or in addition to) the babel-polyfill, you can look at Polyfill.io.

Like babel-polyfill, Polyfill.io will provide core Javascript functionality (e.g. Array.from), but unlike babel-polyfill, it also polyfills DOM behavior, (e.g. ChildNode.remove()). By default, it uses the browser user-agent string to determine which polyfills are necessary, preventing modern browsers from needing to download polyfills they don't need.

The main thing that Polyfill.io doesn't provide, which babel-polyfill does, is support for generator functions (provided by regenerator-runtime), so for full functionality, you'd want to include that instead of the whole babel-polyfill.

Answer 2

The babel-polyfill packages just polyfills javascript objects as far as I know, Childnode.remove() is part of the DOM so babel won't do anything with it. I would suggest that you just use the polyfill suggested in the Mozilla documentation.

// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('remove')) {
      return;
    }
    Object.defineProperty(item, 'remove', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function remove() {
        this.parentNode.removeChild(this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);