Vue-cli: Problem adding plugins to babel with vue-cli

[victorst79]

Version

3.11.0

Environment info

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-3470 CPU @ 3.20GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.11.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

My problem is that when compiling the project, I try to open it on an Android device with Android 6, the browser does not understand the spread operators and throws an error in the log, like this:

09-24 06:26:32.336 22180-22180/com.sdadar4.pruebasvue I/chromium: [INFO:CONSOLE(1)] "Uncaught SyntaxError: Unexpected token ..."

Investigating I found a plugin for babel that supposedly transpiling spread operator in ES5

Plugin Babel spread operator

This is my package.json:

{
  "name": "front-project",
  "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",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "jquery": "^3.4.1",
    "node-sass": "^4.12.0",
    "popper.js": "^1.15.0",
    "sass-loader": "^7.3.1",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.4",
    "vue-router": "^3.1.3",
    "vuetify": "^2.0.18",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.22.12",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

My babel.config.js

module.exports = {
  'presets': [
    '@vue/app'
  ],
  'plugins': [
    '@babel/plugin-proposal-object-rest-spread'
  ]
}

When compiling with this configuration, I still have the same problem with the spread operators, as if I had not "translated" them.

What is expected?

When compiling in production mode, transpiling the spread operator in ES5.

What is actually happening?

When compiling in production mode, the spread operator is not transpiling.

---

My project is being compiled with vue-cli in modern mode.

[sodatea]

Please provide a runnable reproduction

[victorst79]

Please provide a runnable reproduction

mm I think it's a bit complicated to reproduce this error, any suggestions for doing so?

[sodatea]

vue create a project, edit the babel config, add the necessary dependencies, show us the steps to build the bundle, and point out the erroneous code, then we can tell if it's a bug from Vue CLI.

[victorst79]

vue create a project, edit the babel config, add the necessary dependencies, show us the steps to build the bundle, and point out the erroneous code, then we can tell if it's a bug from Vue CLI.

Ok, I have finally managed to solve my problem.
The problem was that when compiling I was translating all my code to ES5, but not one of my dependencies, in this case Vuetify.
Adding transpileDependencies: [' vuetify '] in my vue.config.js and installed:

npm install babel-polyfill --save

It has started working correctly in all browsers including Safari.
Thanks to your advice to reproduce the project I have managed to solve it. It is definitely not a problem of vue-cli.