Error with method ParentNode.append() transpiling ES6 with Babel & Webpack

Question

I get this error in IE11 when I'm transpiling ES6 with Babel & Webpack:

“Object doesn't support property or method 'append'”

I have looked around internet and found the solution here:Polyfill (developer.mozilla.org) I pasted that piece of code into my source js file and when transpiling with Babel, IE11 don't show the error anymore. But ...

Is there a way to transpile with Babel and Webpack and don't have to paste the code manually as I did?

This is my .babelrc file:

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3,
      "debug": true
    }]
  ]
}

This is my webpack.config.js file:

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: [
        './node_modules/core-js/stable',
        './node_modules/regenerator-runtime/runtime',
        './src/index.js'
    ],
    mode: 'development',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
            }
        }]
    },
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
    },
};

And, this is my package.json file:

{
  "name": "Demo Project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "@babel/register": "^7.7.4",
    "babel-loader": "^8.0.6",
    "terser-webpack-plugin": "^2.3.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "browserslist": [
    "> .05% in ES",
    "not ie <= 9"
  ],
  "dependencies": {
    "core-js": "^3.5.0",
    "regenerator-runtime": "^0.13.3"
  }
}

Do I need an extra plugin or something? Or have I left something behind?

Anyway, THANKS!

Answer 1

Babel is a JavaScript compiler. It polyfills the JS language features. But append is a DOM feature so it can't be polyfilled by babel. You could use ember-cli-polyfill-io to polyfill the DOM.

Reference:

(1) ParentNode.append polyfill is missing

(2) What babel-polyfill doesn't include