14

On line 4 of the following code, ESLint is giving me a parsing error saying:

Unexpected token =

I'm wondering why this is the case? The code runs properly. What am I doing wrong?

import { Component, PropTypes } from 'react';

export default class MainApp extends Component {
  static propTypes = {
    children: PropTypes.any.isRequired
  }

  componentWillMount() {
    require('./styles/main.styl');
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}
Mogsdad
  • 44,709
  • 21
  • 151
  • 275
adrianmcli
  • 1,956
  • 3
  • 21
  • 49

2 Answers2

19

I was able to fix this by:

1) Install babel-eslint

$ npm i --save-dev babel-eslint

OR

$ yarn add babel-eslint --dev

2) Configure ESLint to use babel-eslint as your parser

Just add "parser": "babel-eslint", to your .eslintrc file.

Sample .eslintrc to use babel-eslint and airbnb's configuration with some custom rules:

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "arrow-body-style": "off",
    "no-console": "off",
    "no-continue": "off"
  }
}
PaulMest
  • 12,925
  • 7
  • 53
  • 50
  • If you added `"parser": "babel-eslint"` & still experience the same issue... make sure your .babelrc contains `"transform-class-properties"` inside plugins (make sure you add it first: `yarn add babel-plugin-transform-class-properties -D`) – Americo Savinon Jun 19 '18 at 01:42
7

You cannot have properties inside classes, you can only have methods.

Reference: http://www.2ality.com/2015/02/es6-classes-final.html#inside_the_body_of_a_class_definition

Gyandeep
  • 12,726
  • 4
  • 31
  • 42
  • Ah, I see. Thanks! I'm new to ES6 classes. – adrianmcli Dec 07 '15 at 03:19
  • 1
    I'm using babel stage-0, which would allow this syntax. I'm using eslint-config-airbnb, and i want to add this rule to eslint. Is there a way to do this? – Sida Zhou Jan 19 '16 at 18:18
  • How do i use both babel-eslint and eslint-config-airbnb at the same time? I tried to config eslint to do this to no avail. – Sida Zhou Jan 19 '16 at 20:25
  • 1
    Just a note, class properties will be available from ES7 and there's already a babel-eslint module for them and of course transpilers. – Teodor Sandu Aug 25 '16 at 06:44
  • Downvoting b/c this is no longer common practice; for example, `create-react-app` now includes the object properties syntax by default, and it is a common Babel include. This answer was correct-ish at one time, but is now out of date. – Ethan Brown Mar 28 '18 at 23:26