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

score 17 · Accepted Answer · edited Sep 25 '17 at 17:46

17

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]);

edited Sep 25 '17 at 17:46

Retsam

30,909
11
68
90

answered May 03 '17 at 09:44

Karl-Johan Sjögren

16,544
7
59
68

Both CharacterData and DocumentType have some compatibility issues themselves, so use those extra polyfills with caution – Fiddles Feb 12 '18 at 16:17
How exactly do you implement this? You just paste the function at the end of your script? – Pastor Cortes Mar 21 '18 at 18:11
1

Polyfills must be registered before they can be used so it should go at the beginning rather then the end. – Karl-Johan Sjögren Mar 21 '18 at 19:09

score 3 · Answer 2 · answered Sep 25 '17 at 18:59

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.

score 3 · Answer 3 · answered Sep 27 '18 at 00:39

3

I created a tiny polyfill npm. Should make you life easier. https://www.npmjs.com/package/element-remove

answered Sep 27 '18 at 00:39

Eric Chen

3,708
2
18
15

ChildNode.remove() polyfill with babel-polyfill

3 Answers3