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

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

36453

小开

最佳答案

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.

小开

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"
]
}

小开

Just as a side note, some text editors (in my case Mac Notes) will contract ... into an elepsis entity, which will fail validation, so be aware of that too...