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

vuetify browser support
babel-polyfill
vuejs ie11 polyfill
vue.js not working in ie11
fetch polyfill babel
babel symbol polyfill
es6 polyfill
webpack ie11 syntax error

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

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.

IE11 is not supported · Issue #794 · vuetifyjs/vuetify · GitHub, Just want to say that IE11 doesn't work with vuetify, but web site saying that IE11 should work. To reproduce node_modules/vue-loader/lib/style-compiler/index​?{ Is it possible to specify what exactly should be polyfilled? I use Vuetify and it relies on some new features like Object.values() which I don't use and without including all babel polyfills in main.js, my app breaks in IE. And including all babel polyfills adds up a weight of around 34 KB gzipped which is costly.

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.

Imported babel-polyfill, still not working in IE11 · Issue #3921 , I've installed babel-polyfill via npm in my project directory and am .com/ajax/​libs/babel-polyfill/6.26.0/polyfill.min.js"></script> in index.html and now it's working. How can I get the vuetify quickstart running in IE11? I target definitely modern browsers, but IE11 seems to be still largely used Problem is i'm using create-react-app, which is polyfilling only the demos site, not the lib. That's why i added a script in package.json for just polyfilling the lib. How would you cover both of these aspects?

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 , 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:  Polyfills: everything you ever wanted to know, or maybe a bit less your website visitors use ye olde internet explorer, or UC browser, or Safari from two weeks ago. clear on the difference

Browser support, Vuetify is a progressive framework that supports all evergreen browsers and IE11 / Safari with polyfill. Environment Vuetify Version: 2.0.4 Last working version: 1.5.16 Vue Version: 2.6.10 Browsers: Microsoft Edge OS: Windows 10 Steps to reproduce just use defult settings vue create test vue add vuetify cd test yarn serve Expected Behavior

Error with Vuetify 2.0.x and Edge : vuetifyjs, tried one of the IE fixes I found by install and adding @babel/polyfill to my vue.​config.js file but that didn't work either: node_modules/vuetify/lib/components/​VBtn/VBtn.js": /*! Also I cannot see any Html in IE11's dev console dom explorer​. Nuxt 2.3.1 modern build issues on IE11/Edge #4432. this isn't working. these days not a lot of library authors actually care about IE11 so it's a good thing

Vue CLI 3 and IE 11 not Working - Get Help, The project is completely stock but no working at IE11. Yes, cli 3 adds a promise polyfill by default - but until 3.0.0-rc.4, there as an “Note that es6.​promise is included by default because it's very common for libs to depend  (Hospitals and other health) I haven't looked very much into what is actually broken with CKE5 under IE11, but I've had to deal with similar problems with polyfilling for IE11 in the past. There are a few conditionals, but supporting IE11 (through webpack magic) would probably be something I'd be willing to pay for, or to help look into and

Comments
  • Have you digested the docs vuetifyjs.com/en/getting-started/… ? I do not use Vuetify - so I this is just a link...
  • @madflow yeah I've done my best, but I don't see a solution in there.
  • 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.
  • Does this error occur during your development AND production? what if you try to build and then run it.
  • could you share your package.json