SyntaxError: Unexpected token ... (82:8) in Browserify

Question

I'm trying to use the mapActions in Vuex as given in Vuex Actions

methods:{
            ...mapActions([
                'increment' // map this.increment() to this.$store.dispatch('increment')
            ])
}

But, it is giving me SyntaxError: Unexpected token at ... . I'm not sure what the problem is and what details I would need to include in the question.

Please let me see your packages.json. This is an issue related to the ES6 compilation. Are you using browserify or webpack? — António Quadrado, Oct 03 '16 at 10:57
Your question was already answered [here](http://stackoverflow.com/questions/33745118/browserify-babel-6-gulp-unexpected-token-on-spread-operator). — António Quadrado, Oct 03 '16 at 11:18
@AntónioQuadrado I have already tried that , but still the same :( — jaysingkar, Oct 03 '16 at 11:30
@AntónioQuadrado I'm using browserify, gulp, laravel-elixr and vueify — jaysingkar, Oct 03 '16 at 11:31

António Quadrado · Accepted Answer · 2016-10-03T12:23:21.800

Try adding this to your package.json

"eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true,
        "modules": true,
        "experimentalObjectRestSpread": true
      },
      "env": {
        "es6": true,
        "browser": true
      }
    }
  }

and in your gulp file in your laravel-elixir instance check if there's a transformer named babelify in elixir.config.js.browserify.transformers and if it exists push into its options.presets a string stage-2. Here's how I have it in my gulp file:

var elixir = require('laravel-elixir')    
if (elixir.config.js.browserify.transformers[0].name === 'babelify') {
        elixir.config.js.browserify.transformers[0].options.presets.push('stage-2');
    }

It may differ for you but you get the idea. All this makes browserify compile the assets using the stage-2 features like the object spread operator that wouldn't normally be contemplated.

score 2 · Answer 2 · answered Mar 31 '17 at 02:37

1:Install the label plugin:

npm install --save-dev babel-plugin-transform-object-rest-spread

2:Then fix the .babelrc file as follow:

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

SyntaxError: Unexpected token ... (82:8) in Browserify

2 Answers2