SyntaxError when using spread operator in .vue files in Elixir Phoenix 1.3 app

Question

I am trying to build some Vue.js components where I would like to use the spread operator to map some states from Vuex in my Phoenix 1.3 app, but I'm getting some javascript compile errors:

  26 |   },
  27 |   computed: {
> 28 |     ...mapState('module/game', ['selectedWord']),
     |     ^
  29 |   }
  30 | }
  31 |

This is the .vue file in question:

<template>
  <div id="guess-panel">
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  props: [],
  data() {
    return {
      guess: ''
    }
  },
  computed: {
    ...mapState('module/game', ['selectedWord']),
  }
}
</script>

<style lang="sass">
</style>

Here is my package.json file

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "autoprefixer": "^8.5.0",
    "bootstrap": "^4.1.1",
    "copycat-brunch": "^1.1.0",
    "es6-promise": "^4.2.4",
    "jquery": "^3.3.1",
    "lodash": "^4.17.10",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "popper.js": "^1.14.3",
    "postcss-brunch": "^2.1.0",
    "sass-brunch": "^2.10.4",
    "typescript-brunch": "^2.3.0",
    "vue": "^2.5.16",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "babel-brunch": "6.1.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "brunch": "2.10.9",
    "clean-css-brunch": "2.10.0",
    "uglify-js-brunch": "2.10.0",
    "vue-brunch": "^2.0.3"
  }
}

And here is my brunch-config.js file

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(static)/
  },

  paths: {
    watched: ["static", "css", "js", "vendor", "components"],
    public: "../priv/static"
  },

  plugins: {
    babel: {
      ignore: [/vendor/],
      plugins: ['transform-object-rest-spread']
    },
    brunchTypescript: {
      removeComments: true
    },
    sass: {
      options: {
        includePaths: ["node_modules/bootstrap/scss"], // Tell sass-brunch where to look for files to @import
        precision: 8 // Minimum precision required by bootstrap-sass
      }
    },
    vue: {
      extractCSS: true,
      out: '../priv/static/css/components.css'
    },
    postcss: {
      processors: [
        require('autoprefixer')(['last 8 versions'])
      ]
    },
    copycat:{
      "js" : ["vendor/fontawesome"],
      verbose : true, //shows each file that is copied to the destination directory
      onlyChanged: true //only copy a file if it's modified time has changed (only effective when using brunch watch)
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true,
    globals: {
      $: 'jquery', // Bootstrap's JavaScript requires '$' in global scope
      jQuery: 'jquery', // Bootstrap's JavaScript requires 'jQuery' in global scope
      Popper: 'popper.js', // Bootstrap's JavaScript requires 'Popper' in global scope
      bootstrap: 'bootstrap', // Require Bootstrap's JavaScript globally
      _: 'lodash'
    }
  }
};

To the best of my knowledge this should work. What am I missing?

Answer 1

You're using ES6 stage-2 syntax.

First you need to install the package

npm install --save-dev babel-preset-stage-2

and update your .babelrc

{
  "presets": ["stage-2"]
}

You may check it here

Answer 2

Installing 'babel-preset-stage-2' will also install 'babel-preset-stage-3' which is the package that actually supports the spread operator. Additionally you need to install 'babel-preset-env' like so:

npm install babel-preset-env --save-dev

Finally, you edit file .babelrc like so:

{
  "presets": ["env", "stage-3"]
}