IE11 + Vue-Cli + Webpack + Babel - SCRIPT1003 Error

Question

I have the SCRIPT1003: Expected ‘:’ error in IE11. I have installed vuejs over vue-cli tool. It worked until I have added vuex library to the package.json. My package.json dependencies are following:

"dependencies": {
    "axios": "^0.16.2",
    "babel-polyfill": "^6.26.0",
    "lodash": "^4.17.4",
    "rxjs": "^5.4.2",
    "vue": "^2.3.3",
    "vue-i18n": "^7.1.0",
    "vue-router": "^2.6.0",
    "vue-rx": "^3.3.0",
    "vuetify": "^0.14.11",
    "vuex": "^2.3.1",
    "vuex-persistedstate": "^2.0.0"
  }

As suggested on many other help forums I have tried using babel polyfill. My .babelrc file is like so:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

I have included the polyfill in the entry point in build/webpack.base.conf.js:

entry: {
  app: ['babel-polyfill', './src/main.js']
},

Unfortunately I am still getting the same error after all of this. Could you please help me how to make it work in IE11?

Thank you in advance.

Best regards,

Goran

Answer 1

Got an answer from Vue.js forum:

https://forum.vuejs.org/t/ie11-vue-cli-webpack-babel-script1003-error/16257/6

The problem was that had added vCardMedia in a component:

components : {
 vCardMedia
}

Once I removed it everything works with babel included. Still not sure why the component is breaking it though...