Fat arrow method definitions

[dadamssg]

Is disallowing defining methods via fat arrows a rule or a bug? This is valid syntax with babel and I'm using babel-eslint but the rule is no-undef which I believe is wrong.

This is really helpful because it auto-binds this to the component instance. If you were to use the non fat arrow syntax, you would need to manually bind this to that method.

This is enabled by the transform-class-properties babel plugin which i have enabled in my .babelrc

{
  "presets": [
    "stage-0",
  	["es2015", {"modules": false}],
  	"react"
  ],
  "plugins": [
    "transform-class-properties"
  ]
}

[eddiemonge]

That plugin also enables

static PropTypes = {
  ...
}

which Standard is complaining about

[Talor-A]

another example that I believe is related, standard doesn't like it when writing your react state this way:

class MyComponent extends Component {
  state = {}
  ...

this is convenient because it's much more readable than the alternative:

class MyComponent extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }
  ...

[bcomnes]

Is it a matter of setting up https://standardjs.com/#how-do-i-use-experimental-javascript-es-next-features ?

[dadamssg]

I think it has something to do with babel-eslint but i have this in my package.json and it still isn't working.

[eddiemonge]

If I use babel-eslint then that complains about double quotes in JSX.

[dadamssg]

That's just a normal rule. Second bullet point here

[eddiemonge]

Except its not. If I don't use babel-eslint as the parser, then Standard does not complain about it.

[dadamssg]

It might not have been linting your jsx properly if you weren't using the babel-eslint parser with the react preset.

¯\_(ツ)_/¯

[bcomnes]

I think if you are not using babel-eslint with JSX, the standard linter won't parse the JSX blocks, thus missing any lint errors that may be in those sections of code. Not 100% on that.

[dadamssg]

https://github.com/standard/eslint-config-standard-jsx/blob/master/eslintrc.json#L16

[bcomnes]

The other issue is that class properties assigned to arrow functions is still in babel land iirc: http://babeljs.io/docs/plugins/transform-class-properties/

If you are using babel transforms to access future JS features, you are definately going to want to turn on the babel parser.

[bcomnes]

Yeah class properties are still in the ES Next zone: http://kangax.github.io/compat-table/esnext/#test-class_fields_class_properties

If you are using these features, you must have the babel-eslint parser enabled.

[feross]

If babel-eslint is set up correctly then using experimental syntax should work. Can you share the output of:

$ standard --version
$ npm ls standard
$ npm ls babel-eslint

[dadamssg]

standard --version  = 10.0.2
npm ls standard     = standard@10.0.2
npm ls babel-eslint = babel-eslint@7.2.3

[dadamssg]

I think I figured it out. I was attempting to convert my project from using my own set of eslint rules to standard. Incidentally, I had "eslint": "^4.0.0", in my package.json file.

After noticing the unmet peer dependency that standard has on eslint@3.19.0, I....

• removed the eslint and eslint-plugin-react dependencies from my package.json file
• removed my own(leftover) .eslintrc file
• did a rm -rf node_modules/
• deleted my yarn.lock file
• did a fresh yarn install

and now everything is working as expected.

@feross I'll let you close this issue if you think it's resolved or wait on the others to see if what I did works for them as well.

[joke2k]

Hi @dadamssg, your solution doesn't work for me.
My project was started with create-react-app script then I yarn add standard and in my package.json:

"standard": {
    "parser": "babel-eslint"
  },

class Please extends Component {
  work = () => { console.log('cmon') }
  render () { ... }
}

returns: error 'work' is not defined

npm ls standard
└── standard@10.0.3

npm ls babel-eslint
├── babel-eslint@8.0.2 
└─┬ react-scripts@1.0.16
  └── babel-eslint@7.2.3

npm ls eslint
├─┬ react-scripts@1.0.16
│ └── eslint@4.10.0 
└─┬ standard@10.0.3
  └── eslint@3.19.0

[dadamssg]

@joke2k I can only guess that it's because you have eslint 4.10.0 installed alongside eslint 3.19.0 because of the requirement from react-scripts. I bet if you removed react-scripts, and thus eslint 4.10.0, and only had 3.19.0 it would work.

[joke2k]

Yeah! @dadamssg you were right!
But uninstalling react-script... I cannot execute start/build/test 😆
This is a mess

[dadamssg]

@joke2k haha sorry to hear that! Unfortunately, I don't have any experience with create-react-app/react-scripts so I can't help you there :/

[joke2k]

It seems that we have to wait standard 11

[IlyasAbdighni]

Did someone find any solution?

[GBarkhatov]

Any solutions?

[ematipico]

Have you tried with standard@beta?

[GBarkhatov]

Yep, not working

[Tommos0]

I'm having the same issue. Using parser: babel-eslint doesn't help.

└─ eslint@3.19.0
└─ babel-eslint@8.1.2
└─ standard@10.0.3

[Flet]

@Tommos0 does npm install standard@beta work better? It uses eslint 4 instead which should help avoid some conflicts.

[Dean177]

@Flet using the beta version of standard resolved the issues I was having with ‘babel -eslint’

[KITSMattStyles]

Upgrading to beta helped me also. Despite npm ls eslint showing only version 3.x under standard, something else must have installed version 4.x. Updating standard to use the same version fixed it. Pretty sure this isn't actually an issue with standard.

[franky47]

I also have this issue with the following setup:

$ npm -ls -g --depth=0
├── babel-eslint@8.2.1
├── eslint@4.15.0
├── standard@11.0.0-beta.0
...

Example code :

// test.js
export default class Foo {
  // Static class fields - https://github.com/tc39/proposal-static-class-features/
  static propTypes = {}

  // Class fields - https://github.com/tc39/proposal-class-fields
  state = {
    foo: 'foo'
  }

  // Fat arrow method
  foo = () => this.state.foo
}

Result:

$ standard test.js
test.js:3:20: Parsing error: Unexpected token =

$ standard --parser babel-eslint test.js
test.js:3:10: 'propTypes' is not defined.
test.js:6:3: 'state' is not defined.
test.js:11:3: 'foo' is not defined.

[ip413]

Doesn't work with beta version 11.0.0-beta.0

Still have Parsing error: Unexpected token = for xx = () => {...

[bcomnes]

@ip413 @franky47 https://standardjs.com/index.html#how-do-i-use-experimental-javascript-es-next-features

[franky47]

@bcomnes yep, tried that initially, no luck with either local or global standard, babel-eslint and eslint.

Edit: alright I've got a combination working:

standard@11.0.0-beta.0
babel-eslint@8.0.0-alpha.17
eslint@4.15.0

The confusing thing seems to come from babel-eslint's apparent misuse of semver: 8.0.0-alpha.17 is tagged as next, but the latest stable is 8.2.1, go figure.

[bcomnes]

iirc you also need to ensure the correct babel transforms, I forget if env ships class fields or not.

[azizhk]

babel-eslint's version is what is causing the issue, downgraded babel-eslint to ^7.0.0 and the error stopped appearing.

[jnreynoso]

Any solutions?

[azizhk]

@jnreynoso Are you using prettier-standard?
You will have to downgrade that as well.
Otherwise only downgrading babel-eslint will solve this problem.

[fedorinoGore]

Any solutions? None of the listed works for me...
still having error while using class member field Parsing error: Unexpected token = for
class XX { xx = {...} }
"babel-eslint": "^7.2.3"
"eslint": "^4.17.0"
"standard": "^11.0.0-beta.0"

[jnreynoso]

@azizhk prettier-standard solved this problem?

[azizhk]

@fedorinoGore my setup is:
"babel-eslint": "^7.0.0"
"standard": "^10.0.3"
"eslint": "^3.19.0"

@jnreynoso
I removed prettier-standard for now. You can use prettier-eslint with standard config, that might give you better control. sheerun/prettier-standard#30 (comment)

[fedorinoGore]

@jnreynoso @azizhk I'm not using Prettier for now... But the problem persist.

[azizhk]

Run these three commands and write the results here.
yarn list babel-eslint
yarn list standard
yarn list eslint
or if you are using npm
npm ls babel-eslint
npm ls standard
npm ls eslint

[fedorinoGore]

npm ls babel-eslint
└── babel-eslint@7.2.3

npm ls standard
└── standard@11.0.0-beta.0

npm ls eslint
├── eslint@4.17.0
└─┬ standard@11.0.0-beta.0
  └── eslint@4.13.1

I made several upgrades recently trying to escape from other issue with eslint and babel-styled-components plugin
So now my configuration differ from initial posted

[azizhk]

Ok so based on these issues:
babel/babel-eslint#566
babel/babel-eslint#564
babel/babel-eslint#589
I thought this was an issue with babel-eslint and downgraded it

But it might also be of having mixed dependency versions of babel (babel/babel-eslint#585)
standard@11 depends on babel@7 which must be causing multiple babel versions.
Can you try either of these:

• Downgrade standard to 10 or
• Upgrade all babel dependencies to 7?

[fedorinoGore]

I really do afraid to upgrade babel and all of its dependencies :)
so for the starter tried to downgrade standard.
And things getting worse. Not standard claims that arrow function class member is undefined

[Rachomir]

I am having same problems with fat arrow functions. :(

[will-hart]

I found a combination that works for me with a create-react-app project. In my package.json (Windows 10) I have:

  "scripts": { 
    "lint": "./node_modules/.bin/standard --parser=babel-eslint | ./node_modules/.bin/snazzy"
  },
  "standard": {
    "parser": "babel-eslint"
  },
  "devDependencies": {
    "babel-eslint": "8.2.1",
    "eslint": "4.17.0",
    "snazzy": "^7.0.0",
    "standard": "^11.0.0-beta.0"
  }

At this stage yarn lint was passing, but class arrow functions and static properties were flagged as errors in VS Code by the chenxsan.vscode-standardjs plugin. I had to add the following line to my .vscode/settings.json file for the workspace:

  "standard.usePackageJson": true

Hopefully that helps somebody else!

[tlvince]

This is fixed for me in v11.0.0 (and using babel-eslint). Thanks!

[Kikobeats]

Me too!

[feross]

Sorry for all the trouble with this issue. If you install the latest version of standard (version 11.0.0) then this issue is resolved.

If you're not sure what version of standard you're using, run:

npx standard --version

Ensure that you're on at least 11.0.0 and you'll be good to go!

[jligeza]

I have version 11 and it still doesn't work.

[feross]

@jligeza Without any additional information, it's impossible to help you. Open a new issue and share a full bug report.

[jligeza]

Sorry, it works now. I just didn't use babel-eslint as written in the documentation.