Vuetify blank display using the Edge browser

Question

My VueJS (v2.6.12) application (setup with vuecli) using vuetify v2.0.7 is running smoothly in Firefox/Chrome in local as well as when the application is built and deployed.

When accessing the web application in local using the Edge browser (v44.19041.423.0) it works fine too.

The issue is when I access the application once it is built and deployed + using the Edge browser, I get this error in the console and the display is completely blank:

SCRIPT5022: SCRIPT5022: Expected identifier, string or number

From reading different posts here as well as in the vuetify documentation here: https://vuetifyjs.com/en/getting-started/browser-support/#vue-cli

I added the transpileDependencies: ['vuetify'] in my vue.config.ts

I am also using these imports for polyfills/compatibility in my main.ts file:

import 'core-js/stable'

import 'regenerator-runtime/runtime'

import vuetify from './plugins/vuetify'

None of these solutions resolves the blank display issue while using Edge.

Also one thing to note is that the application displays fine using the "Edge Insider" browser.

Since Edge works fine in local dev environment I suspect I might be missing a configuration related to the build process maybe?

Any insights appreciated :)

Answer 1

Here is what solved my display issue on Edge:

Add "regenerator-runtime": "^0.13.7" dependency in package.json

Add "core-js": "^3.6.0" dependency in package.json

Make sure these 2 lines are at the top of main.ts:

import 'core-js/stable'
import 'regenerator-runtime/runtime'

Add @babel/preset-env in babel.config.ts like so:

module.exports = {
  presets: [['@babel/preset-env'], ['@vue/app', { useBuiltIns: 'entry' }]]
}