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

score 3 · Answer 1 · answered Aug 22 '17 at 13:13

3

You are getting this error, most likely, because somewhere in your code you've written an object literal with a shorthand property.

The most likely culprit would when passing the Vuex store in the constructor for your main Vue instance:

new Vue({
  el: '#app',
  store,
  // ...
});

IE11 doesn't support shorthand properties, so it's letting you know it's expecting the : needed to define the property value:

new Vue({
  el: '#app',
  store: store,
  // ...
})

answered Aug 22 '17 at 13:13

thanksd

44,567
20
126
130

1

Actually this is transpiled and fixed by babel. Please note the correct answer on this thread: https://forum.vuejs.org/t/ie11-vue-cli-webpack-babel-script1003-error/16257/6 – Goran Aug 22 '17 at 13:14
Looks like removing the shorthand property fixed the error though, right? – thanksd Aug 22 '17 at 13:15
No, i have shorthand syntax elsewhere in the project's components, the problem was inside vCardMedia. For example "store" is added the exact same way like on your fist example and now it is working fine once i removed vCardMedia. – Goran Aug 22 '17 at 13:20
1

yeah it might be an issue with your babel config or your vue-loader then. I'm pretty confident this is the underlying issue. Does `components: { vCardMedia: vCardMedia }` work for you? – thanksd Aug 22 '17 at 13:33
suggesting to stop using object shorthand when already using babel to transpile the code isn't actually getting at the real problem. the whole point of babel is so you can use es6+ features that IE11 doesn't support. – Damon Feb 03 '18 at 01:22
Right, the immediate issue is that Babel doesn’t seem to be configured correctly for the file producing the error. I tried verifying that with OP, but he never responded. – thanksd Feb 03 '18 at 05:35

score -2 · Accepted Answer · answered Aug 22 '17 at 13:13

-2

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...

answered Aug 22 '17 at 13:13

Goran

2,523
2
26
29

This is not a really good answer :( See below if you want to know why it broke and how to fix it without removing any components – ferdynator Sep 25 '17 at 10:16
This is not an answer, it still is a bug. It would be very stupid if a fix of something would be to remove the functionality. – Wannes Jul 17 '18 at 15:13

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

2 Answers2