Home » vue » Cannot compile Vue.js for IE 11

Cannot compile Vue.js for IE 11

Posted by: admin November 26, 2021 Leave a comment

Questions:

So I recently asked a question about this here and after a lot of googling and trying things out this is what I have for my babel.rc:

{
  "presets": [["env", {
    "modules": false,
    "uglify": true,
    "targets": {
      "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
    }
  }],
  "vue",
  "vue-app",
  "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"]
}

And this is what I have for my webpack:

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/',
  'polly-fill': npm + '@babel/polyfill/dist/',
};

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')
  .copy(path.resolve(__dirname) + paths['polly-fill'] + 'polyfill.min.js', 'public/js/')
  .copy(path.resolve(__dirname) + '/resources/assets/js/lib/pace.js', 'public/js/')
  .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 Understand ie 11 does not in any ways have support for anything above es5 how ever My vue JS is still not compiling to ES5, The output from my last question is still the same. I am confused as to how to compile Vue JS to ES5 such that I don’t get the following:

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 :

I am unsure what version of webpack I am using as I am using Laravel Mix, but I am using babel 6.

everything compiles fine, but Vue JS still doesn’t compile properly down to ES5 for IE 11.

Answers:

number: (val, alt = null) => (typeof val === 'number' ? val : val === undefined..... inside your bundle code says to me that arrow functions were not transpiled into normal functions. Try to add transform-es2015-arrow-functions babel plugin. If you will still experience similar errors – try to analyze the code of your bundle and find which ES6 feature not supported by IE11 remain there.