vue.jsbabeljsmicrosoft-edgevue-cli-3browser-support

Vue Babel outputting incompatible code disregarding browserslist


I have a Vue CLI 3 project that I am building. The built code seems to disregard broswerslist. It outputs code that breaks Microsoft Edge regardless if I add Edge to browserslist or not.

The syntax that is being output is the parameter spread operator in a lambda like

(...x) => {}

This is unsupported by a certain version of Edge, and my project keeps outputting it !

These are some of my files:

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "await-mutex": "^1.0.2",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.15",
    "json5-loader": "^1.0.1",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.11",
    "popper.js": "^1.14.7",
    "pretty-checkbox-vue": "^1.1.9",
    "vee-validate": "^2.2.0",
    "vue": "^2.6.9",
    "vue-router": "^3.0.2",
    "vuex": "^3.1.0",
    "tiptap": "^1.14.0"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.123",
    "@vue/cli-plugin-babel": "^3.5.1",
    "@vue/cli-plugin-eslint": "^3.5.1",
    "@vue/cli-plugin-typescript": "^3.5.1",
    "@vue/cli-service": "^3.5.1",
    "@vue/eslint-config-typescript": "^3.0.5",
    "@types/jwt-decode": "^2.2.1",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "typescript": "^3.0.0",
    "vue-template-compiler": "^2.6.9"
  }
}

.browserslistrc

> 1%
last 2 versions
edge 15
not ie <= 8

babel.config.js

module.exports = {
  presets: [
    '@vue/app',
  ],
}

What I have tried:

  1. Removing Typescript from project
  2. Changing .browserslistrc with invalid browser to check if it's reading the file or not, and the build crashed because of browser not found (means it's reading the file).
  3. Settings .browserslistrc to "ie 11", and it still outputs lambdas and spread operators.

Solution

  • The problem lies in two things combined.

    1. Babel (at least by default) doesn't transpile imported libraries, hence any imported JS file that uses new syntax has a great chance it is kept as-is.
    2. Bootstrap-Vue uses such syntax, and importing individual components can cause this problem.

    Solution:

    1. Import the whole of Bootstrap-Vue and Vue.use it in main.js