Webpack build fails for IE (11)

Question

Trying to setup webpack to build my .js and .vue files.

Seems to no transpile _name() {} style function to regular JavaScript.

Thought it should do that out of the box, straight into commons js unless otherwise specified.

No idea why, it's crashing only in IE with some generic JS syntax error about semi colon out of place.

I guess some little flag, setting, something, somewhere.

Looking for some suggestions here.

ex vue

<script>
    export default {
        computed: {
            _name() {
                return 'blah';
            }
        }
    };
</script>

package.json

"@babel/core": "7.0.0-beta.42",
"@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.42",
"@babel/preset-env": "7.0.0-beta.42",
"babel-loader": "8.0.0-beta.2",

"vue-loader": "9.5.1",

"vue-style-loader": "1.0.0",
"sass-loader": "3.2.3",
"node-sass": "^4.1.1",
"css-loader": "0.25.0",
"style-loader": "0.13.1",
"vue-html-loader": "1.2.3",
"file-loader": "^0.8.4",

"webpack": "3.4.1",
"webpack-dev-server": "1.16.1",
"webpack-stream": "3.2.0",
"copy-webpack-plugin": "3.0.1",
"replace-webpack-plugin": "0.1.2",
"uglifyjs-webpack-plugin": "1.2.7"

config

entry: [__dirname + '/../src/bootstrap.js'],

output: {
    path: __dirname + '/../public',
    filename: 'app.min.js',
    chunkFilename: "[name].[chunkhash:4].js",
    publicPath: '/',
},

plugins: [
    new CopyWebpackPlugin(
        (function () {
            var copy = [{
                to: '',
                from: __dirname + '/../src/core/assets'
            }, {
                to: '',
                from: __dirname + '/../src/app/assets'
            }];

            if (data.copy) {
                copy.concat(data.copy);
            }

            return copy;
        })()
    ),

    new ReplacePlugin({
        skip: false,
        entry: 'src/index.html',
        output: '/public/index.html',
        hash: '[hash]',
        data: {
            scripts: data.scripts
        }
    })
],

module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        }
    }, {
        test: /\.vue$/,
        // exclude: /node_modules/,
        loader: 'vue-loader',

        options: {
            loaders: {
                js: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                sass: 'sass-loader'
            }
        }
    }]
}

build looks like this

/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

/* harmony default export */ __webpack_exports__["default"] = ({
  props: ['name', 'timeout', 'max'],
  computed: {
    _name() {
      return this.name || 'global';
    },

    ...

EDIT:

In the end it was just a matter of adding a few specific transform plugins in the .babelrc file at the root. Probably better way to do this via config. Took a while to match the transforms to each error, but the following set worked for me.

{
    "plugins": [
        "@babel/plugin-transform-spread",
        "@babel/plugin-transform-destructuring",
        "@babel/plugin-transform-block-scoping",
        "@babel/plugin-transform-arrow-functions",
        "@babel/plugin-transform-template-literals",
        "@babel/plugin-transform-computed-properties",
        "@babel/plugin-transform-shorthand-properties"
    ]
}

Note: each plugin needs to be installed as a dependency also.

Answer 1

Since it is a custom webpack configuration and it is not clear there is any additional configuration to babel, try to add @babel/plugin-transform-shorthand-properties plugin to babel-loader options for .vue files.

loaders: {
  js: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-transform-shorthand-properties']
    }
  },
  sass: 'sass-loader'
}