Spread operator in Vuex not compiling correctly with babel, I keep getting module build failed

Question

I am using a spread operator in my mapGetters object. I am aware that you need to use a specific babel-preset-stage to compile ES6 properly. I npm installed babel-preset-stage-2 and was getting this error still.

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/AnotherResult.vue
Module build failed: SyntaxError: Unexpected token (13:8)

  11 | export default {
  12 |     computed: {
> 13 |         ...mapGetters ([
     |         ^
  14 |             'doubleCounter',
  15 |             'stringCounter'
  16 |     ])

I have looked around on the github and it seems like this is a common problem and it looks like people suggested to try babel-preset-stage-3 and other webpack configurations.

Here is my package.json

{
  "name": "vue-cli",
  "description": "A Vue.js project",
  "author": "Maximilian Schwarzmüller <[email protected]>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "vue": "^2.0.1",
    "vue-router": "^2.0.1",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^9.7.0",
    "webpack": "2.1.0-beta.25",
    "webpack-dev-server": "2.1.0-beta.0"
  }
}

.babelrc file

{
    "presets": [
        ["es2015", {"modules": false}],
        ["stage-3", "env"]
    ],
    "plugins": ["transform-object-rest-spread"]
}

It still doesn't want to compile under these new configurations. Any insight would be appreciated please?

Thanks

Answer 1

I try with this setup and for me work

babel.rc:

{
  "presets": [
    ["es2015", { "modules": false }],
    ["stage-2"]
  ]
}

package.json

"devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^9.7.0",
    "webpack": "2.1.0-beta.25",
    "webpack-dev-server": "2.1.0-beta.0"
  }

webpack.config.js

{
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      }