Vue app not working in IE11, even with babel polyfill

Hey guys, my web app won’t run in IE11, it just shows a blank page.

I have used babel’s polyfill, however it still does not work.

The error is:

SCRIPT1002: Syntax error 
chunk-vendors.js (5489,1)![Untitled|319x276](upload://A5sm598cSUwlgInEFOGUN2KxbkP.png) 
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! dom7/dist/dom7.modular */ \"./node_modules/dom7/dist/dom7.modular.js\");\n/* harmony import */ var ssr_window__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ssr-window */ \"./node_modules/ssr-window/dist/ssr-window.esm.js\");\n/**\n * Swiper 5.4.1\n * Most modern mobile touch slider and framework with hardware accelerated transitions\n * http://swiperjs.com\n *\n * Copyright 2014-2020 Vladimir Kharlampidi\n *\n * Released under the MIT License\n *\n * Released on: May 20, 2020\n */\n\n\n\n\nconst Methods = {\n  addClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"addClass\"],\n  removeClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"removeClass\"],\n  hasClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"hasClass\"],\n  toggleClass: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"toggleClass\"],\n  attr: dom7_dist_dom7_modular__WEBPACK_IMPORTED_MODULE_0__[\"attr\"],\n

My babel.config.js:

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: ["last 1 version", "ie >= 11"]
        }
      }
    ]
  ]
};

my main.ts:

import "babel-polyfill";
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import * as VueGoogleMaps from "vue2-google-maps";
import VueMq from "vue-mq";

Vue.use(VueMq, {
  breakpoints: {
    xs: 479,
    tablet: 991,
    laptop: 1024
  }
});

Vue.use(VueGoogleMaps, {
  load: {
    key: "AIzaSyBZEpbDBTlLej-ODlXEfQ8ghkt0emSbAGM",
    libraries: "places" // This is required if you use the Autocomplete plugin
    // OR: libraries: 'places,drawing'
    // OR: libraries: 'places,drawing,visualization'
    // (as you require)

    //// If you want to set the version, you can do so:
    // v: '3.26',
  }

  //// If you intend to programmatically custom event listener code
  //// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)
  //// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`)
  //// you might need to turn this on.
  // autobindAllEvents: false,

  //// If you want to manually install components, e.g.
  //// import {GmapMarker} from 'vue2-google-maps/src/components/marker'
  //// Vue.component('GmapMarker', GmapMarker)
  //// then disable the following:
  // installComponents: true,
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

I’m using a number of libraries including:

SwiperJS Fontawesome Axios lozad

Here is my file structure:
Untitled

If you remove all your plugins, does it work? The error being on chunk-vendors.js and references other modules might indicate that they are not compatible with IE11.

So to fix this I learnt I have to create a vue.config.js file and insert the following into it:

// vue.config.js
module.exports = {
transpileDependencies: [‘dom7’, ‘swiper’, ‘ssr-window’, “vue-awesome-swiper”, “swiper”, “VueGoogleMaps”]
}

This fixed it, the webpage now loads! however some thing’s still don’t work, such as google maps and swiperjs

1 Like

How did you fix it? Can you please share your package.json, babel.config.js and vue.config.js. I have the same issue but nothing works

In transpileDependencies you inserted all your dependencies?