VueJS error on IE11 - SCRIPT1004: Expected ';'

Question

IE11 - ERROR: SCRIPT1004: Expected ';'

Hi! My website works on every browser except IE. My babel.config.js file:

 module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es.promise',
        'es.symbol',
        'es6.array.iterator'
      ]
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-shorthand-properties",
    "@babel/plugin-proposal-object-rest-spread",
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

---> Console screenshot

---> Debugger screenshot

Answer 1

Your debugger screenshot shows the error is from the native-toast package. That package's GitHub shows an unresolved issue , in which a for ... of loop is used. IE does not know how to interpret it, which is a common cause of the Vue IE SCRIPT1004 error (which is just a missing semicolon).

You can tell Vue CLI to transpile the entire native-toast dependency package, which is something it does not do by default. In your vue.config.js (not Babel):

module.exports = {
  transpileDependencies: [
    'native-toast'  
  ]
}

(Note: transpileDependencies is an array of package names [or RegExp])

Apparently, in some cases you may also need this in your babel.config.js (try without it first):

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

Reference:

Vue CLI transpileDependencies

Vue CLI polyfills guide

Vue Forum transpileDependencies example