Vue CLI 3 + Vuetify - Not working on IE 11 (Babel does not transpile?)

Question

I’m using Vue CLI 3 with Vuetify for my project. It works well on Chrome and iOS 12, but it shows blank page on IE11 and iOS Safari < 12. The console in IE11 shows: SCRIPT1003: Expected ':'

I think it’s because Babel does not transpile the ES6 syntax (arrow function, spread, etc) to ES5 syntax. I still see it in the compiled code after running yarn build.

Here is my babel.config.js:

//bable.config.js
module.exports = {
presets: [
  [ '@vue/app', {
     useBuiltIns: 'entry'
  }]
 ]
}

Here is my .browserslistrc:

//.browserslistrc
> 1%
last 2 versions
not ie <= 8

main.js is something like this:

// main.js
import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store/store'
import { firebaseListener } from './firebaseConfig'

Vue.config.productionTip = false

Please help me! Thanks and Regards.

Mestas

Change useBuiltIns's value from entry to usage and remove import '@babel/polyfill' from main.js – Component

Answer 1

babel.config.js

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

main.js

import '@babel/polyfill' // At the top of the file, and make sure @babel/polyfill is installed

Katzir

Here are some guidelines for How do I write a good answer?. This provided answer may be correct, but it could benefit from an explanation. Code only answers are not considered "good" answers. From review. – Liberia