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?

Solution 1

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/

Solution 2

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.

Solution 3

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

Comments

[loganfsmyth]

What specifically did you run? This package doesn't involve eslint, seems like that's an unrelated exist issue with your project

[user17422]

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?

[const314]

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.

[gnowlak]

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

[CyberAbhay]

I did the above steps still getting same error "Unexpected token this"

[Caleb Swank]

Anyone stumbling upon this issue should know that babel presets are no longer supported. babeljs.io/blog/2018/07/27/removing-babels-stage-presets