Destructuring and spread operator: Unexpected token ..

[rocketraman]

I am using espree via eslint 0.18.0 with eslint-react-plugin 2.0.1. During parsing, espree returns Unexpected token .. with a JSX spread operator:

spread.js:

let { aprop, ...other } = this.props

.eslintrc:

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "ecmaFeatures": {
    "modules": true,
    "jsx": true,
    "destructuring": true,
    "spread": true,
    "arrowFunctions": true,
    "blockBindings": true
  },
  "rules": {
    "strict": [2, "global"],
  }
}

$ eslint spread.js

spread.js
  1:14  error  Unexpected token ..

$ eslint --version
v0.18.0

$ grep "version" node_modules/eslint-plugin-react/package.json
  "version": "2.0.1",

$ node_modules/eslint/node_modules/.bin/esparse --version
ECMAScript Parser (using espree version 1.12.3 )

[steadicat]

I was just about to post this. Here's a simple test case:

var espree = require("espree");

espree.parse('var {...rest} = {};', {
  "ecmaFeatures": {
    "destructuring": true,
    "spread": true,
  },
});

Object spread is a common React pattern that has been proposed for inclusion in ES7.

Babel has experimental support for it, but Eslint doesn't support it. Support in Eslint was requested in eslint/eslint#1761, but it's blocked on Espree.

This seems to be the final feature needed to fully support React codebases.

[nzakas]

We only support JSX as defined in the spec: http://facebook.github.io/jsx/

The spread object operator isn't part of ES6, and isn't part of the JSX spec outside of JSX elements. You can already use this inside of JSX attributes with Espree:

var foo = <bar {...props}/>;

That's the extent to which we're going to support it in Espree until it's ratified in some standard.

[EvHaus]

+1

This is currently a deal-breaker for using ESLint on React projects since the spread attribute is very pervasive in React code-bases.

Are there any workarounds?

EDIT Looks like using the babel-eslint parser works as a workaround.

[nzakas]

Sorry, we are not implementing this for reasons already explained. You are free to use babel-eslint or esprima-fb with ESLint if you need to support this feature.