Javascript: 1.0.0 - Unexpected token = with static properties

[neverfox]

With 0.1.0 and 0.1.1, this was fine

export default class Root extends React.Component {
  static propTypes = {
    ...
  }
...

After switching to 1.0.0, eslint complains about Parsing error: Unexpected token =, referring to the=afterpropTypes`.

[goatslacker]

That's because we don't use es7's static class methods yet. This is the intended behavior.

[tomasz-szymanek]

But we are using es7 static properties now, and eslint still complains about it!

[ljharb]

@tomasz-szymanek that's something you'll need to enable in your own eslint config - feel free to file an issue on eslint's repo if you're having trouble. (you probably need the "babel-eslint" parser)

[casertap]

I have the same trouble, how can I enable this feature?

[ljharb]

@casertap you need the babel-eslint parser, and the appropriate babel transform.

We still discourage using any proposal that's pre-stage 3.

[casertap]

Can you help with this.
This is my .eslintrc

{ "extends": "eslint-config-airbnb",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "id-length": 0,
    "react/no-multi-comp": 0,
    "import/default": 0,
    "import/no-duplicates": 0,
    "import/named": 0,
    "import/namespace": 0,
    "import/no-unresolved": 0,
    "import/no-named-as-default": 2,
    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
    "indent": [2, 2, {"SwitchCase": 0}],
    "no-console": 0,
    "no-alert": 0,
    "max-len": ["error", 150],
    "no-unused-vars": [1, { "varsIgnorePattern": "_", "argsIgnorePattern": "_" }],
    "no-underscore-dangle": ["error", { "allow": ["_browserHistory", "__data"] }]
  },
  "plugins": [
    "react", "import"
  ],
  "settings": {
    "import/parser": "babel-eslint",
    "import/resolve": {
      "moduleDirectory": ["node_modules", "src"]
    },
    "ecmaFeatures": {
    "classes": true,
    "jsx": true
    },
  },
  "globals": {
    "__DEVELOPMENT__": true,
    "__CLIENT__": true,
    "__SERVER__": true,
    "__DISABLE_SSR__": true,
    "__DEVTOOLS__": true,
    "socket": true,
    "webpackIsomorphicTools": true
  }
}

Where do I add the transformer? in my webpack?

[ljharb]

Yes, the transform would go in whatever runs babel. You need to add a root "parser": "babel-eslint" as well.

This isn't the proper venue for this kind of help tho - please feel free to join babel's slack, or our gitter channel, or freenode on IRC.

[casertap]

The code base I am using is pretty old:
https://github.com/erikras/react-redux-universal-hot-example

I just updated eslint and babel-eslint to the last version and I am getting hips of errors

[ArtemBernatskyy]

@ljharb plz mention that we need to add this into .eslintrc

[ljharb]

@ArtemBernatskyy eslint core does not yet support class properties; so this guide can not yet recommend them. When it does, it will also include a prohibition on arrow functions in class properties.

[JulianKingman]

If this is the intended behavior, what's the intended way to add static properties? Is assigning them the only way?

[ljharb]

Assigning them outside the class body, yes.

[aleqx]

Just to check, is it still the case that neither of the below are expected to work in 0.10 or 0.12? If yes, any planned support?

class Foo {
  static bar;
}

class Foo {
  static bar = 0;
}

[ljharb]

Do you mean node 0.10 or 0.12? The way to support those is by enabling the Babel transform for public class fields; that should be done in babel-preset-airbnb.

[rangfu]

I managed to get it working by installing babel-eslint:
npm install babel-eslint

Then adding this line to my .eslintrc.js:

module.exports = {
  // the line I added:
  parser: "babel-eslint",
  // the rest of my config here...
};