Vue CLI 3 app not loading in IE with some npm packages

Question

I have created a Vue app with vue-cli 3. It was working fine in all browsers until I installed a npm package "microsoft-cognitiveservices-speech-sdk". To my knowledge, I guess, this particular package is not getting transpiled by babel. Below is my babel.config.js and package.json

//babel.config.js
module.exports = {
  presets: [
    '@vue/app'
  ]
}

//package.json
{
  "name": "vueApp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "microsoft-cognitiveservices-speech-sdk": "^1.7.0",
    "vue": "^2.6.10",
    "vue-good-table": "^2.18.0",
    "vue-i18n": "^8.14.0",
    "vue-router": "^3.1.2",
    "vue-uuid": "^1.1.1",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-eslint": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "http-proxy-middleware": "^0.20.0",
    "less": "^3.10.2",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Once I installed the package, my application is not loading in IE (version 11) browser. But works like a charm in Google Chrome. Can anyone help me out to solve this problem? Thanks in advance!

Answer 1

After a huge research and tried out the suggestions in the web, I have fixed the issue. So apparently, you need to create a configuration file for the app to transpile your troubling packages.

Create a vue.config.js in your root directory and add a property transplieDependencies, an array to contain your troubled libraries for es5 conversion.

//vue.config.js
module.exports = {
    transplieDependencies: [
        "your trouble library name"
    ]
}

Once you implemented the above changes, restart your server to get it working in IE.