Vue app blank page in IE 11 or lower even with polyfills

Question

I have a Vue app running in Firefox, Edge, and Chrome, however, in IE 11 (or lower), I see a blank page. And in the console of IE is see something like SCRIPT1002: Syntax error app.js and SCRIPT5022: SecurityError sockjs.js.

The syntax error goes to a line that contains: eval("__webpack_require__.r(__webpack....Verry long string).

The security error goes to a block that contains:

var Driver = global.WebSocket || global.MozWebSocket;
if (Driver) {
    module.exports = function WebSocketBrowserDriver(url) {
        return new Driver(url); // Where this line is marked
    };
} else {
    module.exports = undefined;
}

After some research, I found out that it might have something to do with missing polyfills. So I added import "@babel/polyfill"; to main.ts and presets: [["@vue/app", { useBuiltIns: "entry" }]] to babel.config.js. But the same errors appear in IE. I tried some other methods described in https://cli.vuejs.org/guide/browser-compatibility.html. But none had success for me.

At this point, I'm absolutely clueless because of similar problems on the internet all point at missing polyfills.

Some extra info about the app:

• Was created using the Vue cli 3
• Uses typescript.
• Uses some new js features like Object.entries

Update:

Looking a bit more at the error I have found that IE11 has problems loading the vuex-persist module in my app. I'm continuing my search.

Answer 1

So the issue was with a dependency I was using. vuex-persist was causing the issue. The fix was to add the following in vue.config.js:

module.exports = {

/* ... other config ... */

  transpileDependencies: ['vuex-persist']

}

Thanks to: https://forum.vuejs.org/t/internet-explorer-11-script1002-blank-page-error/53327/5