What does this SCRIPT1002: Syntax error in IE11 mean? (Vue)

Question

I've made a web app in Vue.JS and it won't compile 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)
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's a picture of my file structure:

Answer 1

first don't exclude the libs from transpiling (babel-loader) because you need es5

exclude: [/node_modules\/(?!(swiper|dom7)\/).*/]

then try this config with plugins, maybe you also need the "transform-exponentiation-operator"

// https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript/babel-config.js

const legacy = {
  presets: [
    ["@babel/preset-env", {
      targets: {
        browsers: [
          "ie >= 11",
          "not dead"
        ]
      },
      useBuiltIns: "usage",
      corejs: 3,
    }]
  ],
  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    "transform-eval"
  ],
  comments: false
};

check how to dual compile for legacy There's also a good example how to handle typescript-vue with IE11

// snippet from https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript-typescript-legacy/index.js
{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: babelConfig.legacy
    },
    {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/],
        compilerOptions: {
          target: 'es5'
        }
      }
    },
  ]
}

Update According to vue-cli, the solution is transpileDependencies. your module is an es6 module which has to be transpiled to es5, webpack ignore node_modules by default for transpiling. https://cli.vuejs.org/config/#transpiledependencies

// vue.config.js
module.exports = {
  transpileDependencies: ['dom7', 'swiper', 'ssr-window']
}