spread operator in react throwing error of Unexpected token

Question

Here is the code where I have included spread operator

style={{ ...styles.detailsRow.icon, alignSelf: 'centre' }}

What things do I need to install or add to make it run?

And also what is its equivalent in es2015?

score 24 · Accepted Answer · answered Jul 20 '16 at 21:10

24

You need to configure Babel to use the transform-object-rest-spread plugin. Refer to the following link for details: https://babeljs.io/docs/plugins/transform-object-rest-spread/

answered Jul 20 '16 at 21:10

const314

1,620
11
16

What specifically did you run? This package doesn't involve eslint, seems like that's an unrelated exist issue with your project – loganfsmyth Jul 20 '16 at 22:04
i had installed eslint before, so I deleted it and installed transform-object-rest-spread again. I followed all the methods given in the link but it is still giving me that error. Do you know of es2015 equivalent of the code? – user17422 Jul 20 '16 at 22:10
There is the eslint-config-keystone package mentioned in the error messages you posted before. This package requires the outdated eslint version. Try removing the eslint-config-keystone dependency and installing babel plugin again. – const314 Jul 20 '16 at 22:14
3

You could also use babel-preset-stage-0, and add this to your .babelrc ```"presets": ["es2015", "react", "stage-0"]``` Just run `npm install --save-dev babel-preset-stage-0` – gnowlak May 18 '17 at 12:33
5

I did the above steps still getting same error "Unexpected token this" – CyberAbhay Aug 16 '18 at 06:35

score 14 · Answer 2 · edited Dec 29 '18 at 18:58

14

You are missing one babel preset, stage-0

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

if you have .bablerc file add following to it.

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

Or added to webpack config in loader.

edited Dec 29 '18 at 18:58

wnull

217
6
21

answered Jul 05 '17 at 14:20

James Norman

505
5
14

3

Anyone stumbling upon this issue should know that babel presets are no longer supported. https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets – Caleb Swank Feb 20 '19 at 18:01

score 7 · Answer 3 · edited Mar 14 '17 at 21:04

7

I had the same problem, and the fix I found was to add experimentalObjectRestSpread to the ecmaFeatures setting in .eslintrc:

"parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module",
  "ecmaFeatures": {
     "jsx": true,
     "experimentalObjectRestSpread": true
  }
}

edited Mar 14 '17 at 21:04

FLCL

2,445
2
24
45

answered Oct 01 '16 at 19:01

astoria boy

169
2
5

spread operator in react throwing error of Unexpected token

3 Answers3

Linked