#StackBounty: #vue.js #babeljs #microsoft-edge #vue-cli-3 #browser-support Vue Babel outputting incompatible code disregarding browsers…

Bounty: 50

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.