Compile JS not IE11 compatible

[rolandschuetz]

I'm using your library like this:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: '> 0.25%, not dead, IE >= 11'
    });

This does not result in an IE11 compatible js code. I'm getting a JS syntax error because the resulting code has ES6 function declarations.

What do I have to do?

[scottcharlesworth]

The webpack.mix.js you've posted should be enough.

Does the incompatible code reside in a vendor library, or in your own app code?

[rolandschuetz]

So in my app.js I'm including Buefy like this:

import Buefy from 'buefy';
Vue.use(Buefy, {
    defaultIconPack: 'fa'
})
;

In ./node_modules/buefy/src/utils/FormElementMixin.js there is the following code:

import config from '../utils/config'

export default {
    props: {
        size: String,
        expanded: Boolean,
        loading: Boolean,
        rounded: Boolean,
        icon: String,
        iconPack: String,
        // Native options to use in HTML5 validation
        autocomplete: String,
        maxlength: [Number, String],
        useHtml5Validation: {
            type: Boolean,
            default: () => config.defaultUseHtml5Validation
        },
...

The resulting app.js in debug mode is:

/*!**********************************************************!*\
  !*** ./node_modules/buefy/src/utils/FormElementMixin.js ***!
  \**********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _utils_config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/config */ "./node_modules/buefy/src/utils/config.js");

/* harmony default export */ __webpack_exports__["default"] = ({
    props: {
        size: String,
        expanded: Boolean,
        loading: Boolean,
        rounded: Boolean,
        icon: String,
        iconPack: String,
        // Native options to use in HTML5 validation
        autocomplete: String,
        maxlength: [Number, String],
        useHtml5Validation: {
            type: Boolean,
            default: () => _utils_config__WEBPACK_IMPORTED_MODULE_0__["default"].defaultUseHtml5Validation
        },
        validationMessage: String
    },
    data() {
        return {
            isValid: true,
            isFocused: false,
            newIconPack: this.iconPack || _utils_config__WEBPACK_IMPORTED_MODULE_0__["default"].defaultIconPack
        }
    },
...

You can see that default: () => _utils_config__WEBPACK_IMPORTED_MODULE_0__["default"].defaultUseHtml5Validation uses the new javascript arrow function, which is not supported on IE11

[scottcharlesworth]

So it's in a vendor library. This plugin will only polyfill your own app code, it will not change code inside vendor libraries.

Buefy's readme does state that IE10+ is only partially supported.

[rolandschuetz]

Yeah, thank for looking into it!

Would it be possible to already run the vendor code though Babel?

[scottcharlesworth]

You could try something like:

mix.webpackConfig({
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /(bower_components)/,
            use: [
                {
                    loader: 'babel-loader',
                    options: mix.config.babel()
                },
            ],
        }],
    }
});

to override the underlying webpack configuration of Mix to stop excluding node_modules (exclude tag originally looked like /(node_modules|bower_components)/).