Compiling ES6 and VUE JS not working in IE 11

Question

So I am having an issue with ES6, Webpack and VUE JS in IE 11. This works in Edge, Chrome, Safari and Firefox, but not IE 11.

The error:

SCRIPT1002: Syntax error
vue.js (16,8498)

Ok, so whats at this line?

(module,__webpack_exports__,__webpack_require__){"use strict";eval("/* unused harmony export getJSON */\n/* unused harmony export getScrollBarWidth */\n/* unused harmony export translations */\n/* harmony export (immutable) */ __webpack_exports__[\"b\"] = delayer;\n/* unused harmony export VueFixer */\n// coerce convert som types of data into another type\nconst coerce = {\n  // Convert a string to booleam. Otherwise, return the value without modification, so if is not boolean, Vue throw a warning.\n  boolean: val => (typeof val === 'string' ? val === '' || val === 'true' ? true : (val === 'false' || val === 'null' || val === 'undefined' ? false : val) : val),\n  // Attempt to convert a string value to a Number. Otherwise, return 0.\n  number: (val, alt = null) => (typeof val === 'number' ? val : val === undefined || val === null || isNaN(Number(val)) ? alt :

This goes on for a while ...

I am confused by this mess, as are you I am sure:

This is my Webpack file:

let mix = require('laravel-mix');
var path = require('path');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

var npm = '/node_modules/';

var paths = {
  'jquery-ui': npm + 'jquery-ui/',
  'bootstrap': npm + 'bootstrap/',
  'select2': npm + 'select2/dist/',
  'lightbox2': npm + 'lightbox2/dist/',
  'accounting': npm + 'accounting/',
};

var jQueryUITheme = 'ui-lightness';

mix.less('resources/assets/less/style.less', 'public/css/', {
  modifyVars: {
    'bootstrap': '"' + path.resolve(__dirname) + paths['bootstrap'] + 'less/' + '"'
  }
}).js('resources/assets/js/boot.js', 'public/js/all.js').webpackConfig({
  resolve: {
    alias: {
      "matches-selector/matches-selector": "desandro-matches-selector",
      "eventEmitter/EventEmitter": "wolfy87-eventemitter",
      "get-style-property/get-style-property": "desandro-get-style-property",
      'masonry': 'masonry-layout',
      'isotope': 'isotope-layout',
      'isotope/js/layout-mode': 'isotope-layout/js/layoutmode',
      'pace': 'pace-progress',
      "jquery-ui/ui/widget": "jquery-ui/widget.js",
    }
  },
}).js('resources/assets/js/vue/main.js', 'public/js/vue.js')
  .scripts([
    'resources/assets/js/lib/jquery.validate.min.js',
    'resources/assets/js/lib/jquery.bootstrap.wizard.min.js',
    path.resolve(__dirname) + paths['accounting'] + 'accounting.js'
  ], 'public/js/genesis.js')
  .copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/jquery-ui.min.css', 'public/css/lib/jquery-ui/jquery-ui.min.css')
  .copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/theme.css', 'public/css/lib/jquery-ui/theme.css')
  .copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/images', 'public/css/lib/jquery-ui/images')
  .copy(path.resolve(__dirname) + paths['select2'] + 'css/select2.min.css', 'public/css/lib/select2/select2.min.css')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'css/lightbox.min.css', 'public/css/lib/lightbox2/css')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/loading.gif', 'public/css/lib/lightbox2/images')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/close.png', 'public/css/lib/lightbox2/images')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/next.png', 'public/css/lib/lightbox2/images')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/prev.png', 'public/css/lib/lightbox2/images')
  .sourceMaps();

 mix.babel(['public/js/main.js'], 'public/js/main.js');
 mix.babel(['public/js/vue.js'], 'public/js/vue.js');
 mix.minify(['public/js/main.js', 'public/js/vue.js', 'public/css/style.css']);

I have also installed and done: babel polyfill and done: import "@babel/polyfill"; in the boot.js we have.

I am unsure what the error is aside from "syntax". Is there something I mam missing?

Sorosis

Answer 1

As already mentioned, IE11 doesn't support ES6. Looking at the line of code that throws that error you'll quickly find ES6 features (arrow functions for example).

Polyfilling will not provide you with the ability to use ES6, the only thing you can do is configure babel to target ES5 instead.

You can do that by editing your babelrc (for Babel 7):

{
  "presets": [
    [
      "@vue/app",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}

If you're still using Babel 6, according to the github docs you should be able to use it like so:

{
  "presets": [
    ["env", {
      "targets": {
        // The % refers to the global coverage of users from browserslist
        "browsers": [ ">0.25%"]
      }
    }],
    "vue"
  ]
}

Cretinism

this seems like a better answer, what is @vue/app? I am using { "presets": ["env", "vue"] } is there a babel preset for @vue? – Sorosis

The @vue space is the one of the current version of vue cli and everything associated with it (v3) - this is only compatible with babel 7. If you're still using 6, I guess the same thing should work by nesting those options in your "env" array. I'll update my answer but I'm not 100% sure if it works this way for babel 6. – Cretinism

which file should I put this one? – Coal

@JSmith this needs to go in your babel config file. Most of the time it's named .babelrc – Cretinism

When I try to run this preset along with @babel/preset-env like so [ '@babel/preset-env', { modules: false } ], I get an error - require is not defined – Xerophthalmia

Even running this preset alone triggers a require is not defined error. – Xerophthalmia

Answer 2

Here a real example from a production Vue 2.x app designed specifically for IE11. I wanted to provide a complete view of everything I used to transpile ES6 to ES5, add polyfill promises and async functions, which IE11 doesn't support natively. Note that I specifically target IE11 in the babel.config.js file.

package.json:

"@vue/cli-plugin-babel": "^3.12.1",
"regenerator": "^0.14.7",
"core-js": "^3.19.3",
"es6-promise": "^4.2.8"

main.js:

require('es6-promise').polyfill();
import "core-js/stable";
import "regenerator-runtime/runtime";

babel.config.js:

module.exports = {
  presets: [
    ['@vue/app', {
        "targets": {
          "browsers": [
            "> 1%",
            "last 3 versions",
            "ie >= 11"
          ],
        },
        "useBuiltIns": "entry"
      }]
  ]
}

Thinnish