Thursday, May 23, 2024
 Popular · Latest · Hot · Upcoming
58
rated 0 times [  62] [ 4]  / answers: 1 / hits: 36690  / 9 Years ago, mon, november 16, 2015, 12:00:00

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


More From » gulp

 Answers
13

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.


[#64382] Friday, November 13, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
breonnamayah

Total Points: 574
Total Questions: 115
Total Answers: 96

Location: England
Member since Sun, May 21, 2023
1 Year ago
breonnamayah questions
;