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

loganfsmyth · Accepted Answer · 2018-06-11 17:05:30Z

168

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.

edited Jun 11, 2018 at 17:05

answered Nov 16, 2015 at 22:03

loganfsmyth

162k31 gold badges349 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Battle_Slug Over a year ago

@MikeBoutin loganfsmyth could you please specify where to specify it as preset? I have the same problem, though I use babelify via cli. Thanks

Mike Boutin Over a year ago

Via CLI you need a .babelrc file and the presets are in the plugins page on the babeljs site

Kirk Strobeck Over a year ago

Currently its stage 3! :D

theisof Over a year ago

npm install --save-dev babel-preset-stage-3 and presets: ["stage-3"] did it for me.

Devnegikec · Accepted Answer · 2016-08-01 10:17:31Z

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

user1775718 · Accepted Answer · 2016-10-30 20:22:09Z

3

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...

answered Oct 30, 2016 at 20:22

user1775718

1,5863 gold badges19 silver badges36 bronze badges

2 Comments

user1775718 Over a year ago

That's not my text editor. It's just somewhere I occasionally dump blocks of code. :D

user1775718 Over a year ago

It's worth pointing out that various products, including microsoft products and things like slack, often insert their own special formatting characters (which are often hidden) and/or convert certain characters for appearance. That can be really tricky to spot and can cause you problems...

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Linked

Related