Eslint-plugin-react: sort-comp reporting a bad error message

[mikecousins]

As you can see getCourtesyOptions IS before loadProvinces.

[calmdev]

What worked for me and may work applied to the context here is making sure that all get methods are defined prior to any load methods.

[neiker]

Same issue, same fix

[yannickcr]

Can you post your eslint configuration and a full code example that trigger the error? Thanks.

[neiker]

Yes, no problem:

{
  "parser": "babel-eslint",
  "extends": [
    "airbnb"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true,
      "classes": true
    }
  },
  "rules": {
    "react-native/no-unused-styles": 2,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 2,
    "react-native/no-color-literals": 2,
    "react/jsx-no-bind": [2, {
      "ignoreRefs": false,
      "allowArrowFunctions": false,
      "allowBind": false
    }],
    "complexity": [
      2,
      10
    ],
    "max-depth": [
      2,
      4
    ],
    "max-nested-callbacks": [
      2,
      2
    ],
    "max-params": [
      2,
      4
    ],
    "max-statements": [
      2,
      18
    ]
  },
  "globals": {
    "__DEV__": true
  },
  "plugins": [
    "react-native"
  ]
}

[yannickcr]

Thanks. Can you also post a React Component that trigger the bug?

[neiker]

I could not find it, but I remember it was something like:

constructor()
shouldComponentUpdate()
setSomething()
onDragStart()
getBound()
onSomething()

[calmdev]

I haven't been able to intentionally reproduce it either. It happen while I was refactoring a component. If I come across it again I'll post an example.

[yannickcr]

Ok, thanks @calmdev .

For now I tried with:

class Hello extends React.Component {
  constructor() {}
  shouldComponentUpdate() {}
  setSomething() {}
  onDragStart() {}
  getBound() {}
  onSomething() {}
  render() {}
}

And the airbnb configuration (since it is the one @neiker is using) but all I got is

setSomething should be placed after onSomething (react/sort-comp)

Which is correct in this case.

[mikecousins]

Yes, I can no longer reproduce this. Maybe it was fixed by accident?

[calmdev]

This is by no means a practical example, but it will cause the message to appear at least.

Maybe it will help.

export default class View extends React.Component {
  getA() {}
  componentDidMountOk() {} // message doesn't show using `componentDidMount`
  getB() {}
  componentWillMount() {}
  render() {}
}

[yannickcr]

Thanks @calmdev , I was able to reproduce the bug with your example. I'll fix this.