Browserify, Babel 6, Gulp - Unexpected token on spread operator

Question

I'm trying to get my Browserify/Babelify/Gulp working in my project, but it won't take the spread operator.

I got this error from my gulpfile:

[SyntaxError: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js: Unexpected token (16:8) while parsing file: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js] 

This is my gulpfile.js

var gulp = require('gulp'); var source = require('vinyl-source-stream'); var browserify = require('browserify'); var sourcemaps = require('gulp-sourcemaps'); var uglify = require('gulp-uglify'); var buffer = require('vinyl-buffer'); var babelify = require('babelify');  gulp.task('build', function () {   return browserify({entries: './src/client/app.js', extensions: ['.js'], debug: true})     .transform(babelify, {presets: ['es2015', 'react']})     .bundle()     .on('error', function (err) {       console.error(err);       this.emit('end');     })     .pipe(source('app.min.js'))     .pipe(buffer())     .pipe(sourcemaps.init({loadMaps: true}))     .pipe(uglify())     .pipe(sourcemaps.write('./'))     .pipe(gulp.dest('./public/js')); });  gulp.task('default', ['build']); 

I tried to create a .babelrc file, but it do the same thing. And my script works when i delete the spread operator.

This is the file where the Unexpected token occurs (quite simple).

import utils from '../utils/consts';  const initialState = {   itemList: [     {name: 'Apple', type: 'Fruit'},     {name: 'Beef', type: 'Meat'}   ] };  export function groceryList(state = initialState, action = {}) {    switch(action.type) {      case utils.ACTIONS.ITEM_SUBMIT:       return {         ...state,         itemList: [           ...state.itemList,           {name: action.name, type: action.itemType}         ]       };      default:       return state;    } } 

I don't know what doesn't work in this, i read some issues on Github and the setup page on Babel website, but i can't make it work correctly.

Can anyone show me how to handle this correctly? Thank you

Answer 1

That syntax is an experimental proposed syntax for the future, it is not part of es2015 or react so you'll need to enable it.

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

and add

"plugins": ["transform-object-rest-spread"] 

into .babelrc alongside your existing presets.

Alternatively:

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

and use stage-3 in your presets to enable all stage-3 experimental functionality.

Answer 2

I had the same issue, installed stage-2 plugin and modified my package.json file, which looks like below

"babel": {     "presets": [       "es2015",       "react",       "stage-2"     ]   }