SCRIPT1003: Expected ':' on IE ~ Vue.js ~ MDBootstrap

Question

I have a simple Vue.js application which works perfectly on other browsers than IE, which shows a blank page with an error SCRIPT1003: Expected ':'. I have added a vue.config.js file which looks like that:

module.exports = {
  transpileDependencies: ["bootstrap-css-only", "mdbvue"]
};

My .babelrc file is a default one taken from the official project starting page, this is:

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

In my main.js file I tried 2 approaches:

import "core-js/stable";
import "regenerator-runtime/runtime";

and

import "@babel/polyfill";

Both didn't change anything and the error and behaviour is the same. The only one thing which still comes to my mind to solve this problem is mentioned here, i.e. in export default I'm using the following syntax for component:

components: {
  mdbContainer,
  mdbRow,
  mdbCol,
  mdbCard,
  mdbCardBody,
  mdbInput,
  mdbBtn,
  mdbIcon,
  mdbModalFooter,
  mdbView
}

Edit2: But if I'll drop this lines then all my UI elements from MDBootstrap are gone. Is there any other way to use it? I wanted simply to use polyfills.

I tried to create babel.config.js file, but also didn't help. The logic in this file is like that:

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

Is there anything I'm missing? What I understood the vue.config.js file doesn't has to be imported anywhere, because vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service. Here are my questions:

1. Any ideas what can be wrong?
2. Shall I have babel.config.js and .babelrc or only one of these?
3. Is babel.config.js file automatically detected like vue.config.js?
4. [Edit] Maybe something in webpack configuration should be changed?

Vue CLI version:

$ vue --version
3.11.0

Answer 1

I had a similar issue. I recreated the project using vue-cli 4 and left all the defaults alone.I did not reference babel or core-js in my main.js. I looked at the console error in IE to see which library was causing the script error,( lets call it some-imported-lib ). Then I added that library in vue.config.js as follows

transpileDependencies:['some-imported-lib']

Answer 2

The problem is that IE11 doesn't support shorthand property notation, but you're using that in your components list. Your .babelrc isn't set to ensure that the resulting code can run on IE11.

You'll want to review the browserlist documentation to fine-tune your browsers setting, but for instance adding IE 11 to it will ensure that the transpiled code has all the transforms required to run on IE11.

Note that IE11 basically doesn't support anything in ES2015+. (It has const and a broken version of let, but that's basically it.) So doing this will effectively transpile all your code to ES5 levels. You may want to serve different bundles to IE and to other, more modern browsers.