IE11 JavaScript Syntax Error on class, built with Webpack

Viewed 812

I can't make Babel convert ES6 class definition to ES5 that would work in IE11. JavaScript compiles just fine, it works fine in modern browsers but it still leaves class definitions in ES6 form which breaks the IE11.

This is my webpack.js:

module.exports = {
module: {
    rules: [
        {
            test: /\.js$/,
            include: [path.resolve(__dirname, 'src')],
            exclude: /node_modules/,
            loader: 'babel-loader',

            options: {
                presets : [
                  [ "@babel/preset-env", {
                     "useBuiltIns": "entry",
                     "targets": {
                        "browsers": [
                           "last 5 versions",
                           "ie >= 10"
                        ]
                     },
                     "debug":true
                  }]
                ]
            }
        }
    ]
},

entry:
    [path.resolve(__dirname + "/src/js/app.js")],

...
};

I have also included babel polyfill to top of my js file

import '@babel/polyfill';
2 Answers
  1. Change package.json to this:
  "scripts": {
    ...
    "build": "vue-cli-service build **--watch**",
    ...
  },
  1. npm run build

This will solve your problem. Without --watch you got Script error in IE11.

Related