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"
        }
    }
};

Have you digested the docs https://vuetifyjs.com/en/getting-started/quick-start#ie-11-safari-9-support ? I do not use Vuetify - so I this is just a link... — madflow, Oct 04 '19 at 11:05
@madflow yeah I've done my best, but I don't see a solution in there. — Scott Baker, Oct 04 '19 at 18:51
The same problem occurs on me, I googled every corner to look for the answer. I tried my best too, nothing works. So, if you find the solution someday, please come back here to paste the answer, thank you. — simmone, Oct 09 '19 at 08:05
Does this error occur during your development AND production? what if you try to build and then run it. — Anton Toshik, Oct 09 '19 at 09:13

Amir Christian · Answer 1 · 2019-10-15T12:07:19.220

On my side SCRIPT1002: Syntax Error was resolved by updating webpack-dev-server.

Try to change webpack-dev-server version to 3.8.2 and remove node_modules and npm install again.

One more.

// .babelrc

{
  "presets": ["@babel/preset-env"]
}

// babel.config.js

module.exports = {
  presets: ['@babel/preset-env']
}

You can install vuetify in three ways:

default installation

The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size and is setup you will see in a new vue-cli-3 project. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.

vue-cli a-la-carte installation

You can also manually import individual components without the need for the vuetify-loader. This is considered manual A-la-carte.

(And about your done: import Vuetify from 'vuetify')

vue-cli full installation

The last method will import and setup all of Vuetify's features and styles. As stated above, it is still recommended that you utilize the vuetify-loader if at all possible. For this install, you will need to manually import the Vuetify styles. This is also the process used when bootstrapping Vuetify through a browser as opposed to compiling.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Good luck.

score 0 · Accepted Answer · answered Oct 10 '19 at 12:10

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.

score 0 · Answer 3 · answered Apr 24 '20 at 10:41

For people who are using Vue CLI. That type of issue with polyfill in IE 11 can be resolved by adding npm package name (package causing syntax error) to transpileDependencies section in vue.config.js like is descripted at https://cli.vuejs.org/guide/browser-compatibility.html#browserslist

In my case it was 3 packages, and now my config looks like:

    transpileDependencies: [
    'vuetify',
    'query-string',
    'strict-uri-encode',
    'split-on-first'
  ],

Package name causing the error you will find in browser console. Go to error details, you should find package name somewhere near code line causing the error.

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

3 Answers3