Vuetify/Lib Polyfilling for IE11 isn't working - SCRIPT1002: Syntax Error

Question

I'm trying to reference vuetify/lib with the usual import Vuetify from "vuetify/lib", but when I do, the application chokes in IE11 with SCRIPT1003: Expected ':'.

If I change the reference to import Vuetify from "vuetify" - without the /lib portion - it doesn't throw the error.

Note that I'm not actually using vuetify anywhere yet. I don't have a single Vuetify component or call; I'm just adding the library.

Now that I've ostensibly got vuetify included and parsed happily by IE11, I'd like to use some of the components. If I put any vuetify components in my template, IE11 throws a Script1002: Syntax Error message.

Anyone have a suggestion to make this actually work?

Index.cshtml

<v-app>
  <div id="reportApp"></div>
</v-app>

Entry Point

// polyfills
import "core-js/stable";
import "regenerator-runtime/runtime";

import Vue from "vue"
import "@mdi/font/css/materialdesignicons.css"
import reportFilter from "./reportFilter.vue"

const options = {
    el: "#reportApp",
    render: h => h(reportFilter)
};

export default new Vue(options);

reportFilter.vue

<template>
    <div>
      <!-- this will throw a syntax error -->
      <v-progress-circular indeterminate color="primary"
      ></v-progress-circular>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: 'report-filter',
        data: function(){
            return {
                dataTypeList: [
                    { value: "1", text: "one" },
                    { value: "2", text: "two" },
                    { value: "3", text: "three" }
                ]
            }
        },
    }

</script>

webpack.config.js

const path = require("path");
const fs = require("fs");
const { VueLoaderPlugin } = require("vue-loader");
const VuetifyLoaderPlugin = require("vuetify-loader/lib/plugin");

module.exports = {
    entry: jsEntries,  // setting jsEntries removed for clarity
    mode: "development",
    module: {
        rules: [
            // other rules for css/sass/etc removed for clarity
            /*javascript*/{
                test: /\.m?js$/,
                exclude: [
                    /node_modules/,
                    /bower_components/
                ],
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets": {
                                        "browsers": [
                                            "last 2 versions",
                                            "ie >= 11"
                                        ]
                                    },
                                    "corejs": "3",
                                    "useBuiltIns": "entry"
                                }
                            ]
                        ]
                    }
                }
            },
            /*vue*/{
                test: /\.vue$/i,
                use: "vue-loader"
            }
        ]
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "./wwwroot/dist/js/"),
        publicPath: "/wwwroot/dist/js/"
    },
    plugins: [
        new VueLoaderPlugin(),
        new VuetifyLoaderPlugin()
    ],
    resolve: {
        alias: {
            vue: "vue/dist/vue.js"
        }
    }
};

Answer 1

Users in the Vuejs forums having a similar issue reported success in using babel to polyfill for this specific issue.

My suggestion is to install the babel polyfill, import it in your app.js and configure the babel.config.js as illustrated here

If you are going to be actively using Vuetify you should also have Vue.use(Vuetify) prior to the declaration of your options app otherwise Vue will not know that it needs to be using that package.