ESLintError in plugin 'gulp-eslint' - Parsing error: Unexpected token

Question

I'm working on a ReactJs project, I am writing code with ES7 in order to write more elegant code inside my React component, specifically static propTypes.

I use Gulp with Babel, ESlint, but I cannot fix a compilation error related to my static propTypes

This is the error message I get

[11:12:34] ESLintError in plugin 'gulp-eslint' Message: Parsing error: Unexpected token = Details: fileName: [MYFOLDER]/client/components/app/article/asset/index.js lineNumber: 5 [11:12:36] [MYFOLDER]/client/components/app/article/asset/index.js 5:19 error Parsing error: Unexpected token =

and it is referred to the line static propTypes = {

import React from 'react';

export default class Asset extends React.Component {

  static propTypes = {
    articleImageUrl: React.PropTypes.string.isRequired,
  };

  static defaultProps = {
    articleImageUrl: 'https://placeholdit.imgix.net/~text?txtsize=60&txt=640%C3%97480&w=640&h=480'
  };


  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="article__asset">
        <figure>
          <img src={this.props.articleImageUrl} />
        </figure>

      </div>
    );
  }
}

This is my babel configuration

return browserify({
            debug: true,
            entries: [`${NPM_DIR}/es5-shim/es5-shim.js`, CLIENT_DIR + '/index.js']
        })
        .transform(babelify.configure({
            sourceMapRelative: CLIENT_DIR,
            presets: ['react', 'es2015', 'stage-0'],
            plugins: ["transform-object-rest-spread", "transform-decorators-legacy", "transform-class-properties"]
        }))
        .bundle()
        .on('error', function(e){
            gutil.log(e);
        })
        .pipe(source('bundle.js'))
        .pipe(rename('bundle.min.js'))
        .pipe(gulp.dest(PUBLIC_DIR));

This is my eslint configuration

{
  "plugins": [
    "react"
  ],
  "extends":  ["eslint:recommended", "plugin:react/recommended"],
  "ecmaVersion": 7,
  "rules": {
    // rules
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "blockBindings": true
    }
  }
}

What am I doing wrong? Thanks a lot

Answer 1

Use the babel-eslint parser in your ESLint configuration.

npm install babel-eslint --save

{
  "parser": "babel-eslint",
  "plugins": ["react"],
  ...
}