Babel fails to compile ES6 object cloning with spread operator

Question

I use grunt-babel to compile my ES6 code. But it returns Warning: dist/app.js: Unexpected token (321:9) Use --force to continue. when I try to use {...obj} to copy and extend object. Following code is working perfect in console of Chrome v61 but Babel doesn't like it. What is the problem?

let a = { a: 12 };
let b = { ...a, b: 15 };

I am using env preset. (babel-core v.6.26.0 and babel-preset-env v.1.6.1)

What version of Babel, what babel presets are you using, how are you compiling? You left a lot of questions unanswered... — elclanrs, Dec 05 '17 at 20:47
Yeah, same issue. I worked around temporarily using `Object.assign({}, )` but would like to know a solution. — Nandu Kalidindi, Dec 05 '17 at 20:47

nbkhope · Accepted Answer · 2017-12-07T18:35:40.427

8

The spread property for objects is not part of ES6. Currently, as of Dec 2017, it is part of the stage 3 proposal for ECMAScript. You can have a look at the proposal here.

You need a babel preset that includes features not yet officially in the language. The babel-preset-env does not include those features.

To solve your problem, you could use something like babel-preset-stage-3 and add "stage-3" to the list of presets in your .babelrc.

Side note:

An alternative to the spread syntax for objects in ES6 is to use Object.assign

let b = Object.assign({}, a, { b: 15 });

edited Dec 07 '17 at 18:35

answered Dec 05 '17 at 20:48

nbkhope

7,360
4
40
58

You mean the spread operations are not allowed? But I am able to do `k = {...a}` just fine. Only the combining of two objects is posing a problem. – Nandu Kalidindi Dec 05 '17 at 20:52
@NanduKalidindi Again, it depends on what preset(s) you're using. – Dave Newton Dec 05 '17 at 20:55
I'm using *env* preset (second JSON from these examples https://babeljs.io/docs/plugins/preset-env/ ) – micobg Dec 05 '17 at 20:56
2

@micobg currently (Dec 2017), the spread operator is not included in `babel-preset-env` – nbkhope Dec 05 '17 at 20:58
@nbkhope, can you share a link where I can check which futures are supported by aech preset? – micobg Dec 05 '17 at 21:01
I couldn't find a specific list of presets, but there is this list of proposals for tc39: https://github.com/tc39/proposals (I found through the more resources section of the article (at the bottom) https://benmccormick.org/2015/09/14/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning/ ) – nbkhope Dec 05 '17 at 22:08
1

[`...` is not an operator](https://stackoverflow.com/q/44934828/218196). Rest arguments, spread parameters and rest/spread elements are all part of ES6 btw. Only rest/spread **properties** are not. @micobg: `preset-env` only contains transforms for features that have been officially released. – Felix Kling Dec 07 '17 at 14:58
@FelixKling thank you so much for pointing that out. I have corrected the answer. Please let us know of any other issues. – nbkhope Dec 07 '17 at 18:36

Nandu Kalidindi · Answer 2 · 2017-12-05T21:11:45.060

You probably would want to add these plugins to your .babelrc. This Github issue has a lot of solutions unexpected token (rest spread operator). I am trying these out now.

{
  "presets": ["react", "es2015"],
  "plugins": ["transform-es2015-destructuring", "transform-object-rest-spread"]
}

npm install --save-dev babel-plugin-transform-es2015-destructuring

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

score 0 · Answer 3 · answered Jul 19 '23 at 19:34

0

I was using an outdated version of ChromeHeadless due to Puppeteer v1, and updating to v16 (for node 16) removed the "Unexpected token '.'" error.

answered Jul 19 '23 at 19:34

Michelle Norris

568
7
14

Babel fails to compile ES6 object cloning with spread operator

3 Answers3