Eslint-plugin-react: [sort comp] error when defining static async before lifecycle methods

[maerzhase]

we are using eslint-plugin-react in a next.js project.
common pattern is:

class Comp extends React.Component {
  static async getInitialProps() {
    ...
  }
  componentDidMount() {
    ...
  }
}

since last update 7.9.1 you get a sort-comp error complaining that the static method should be placed after componentDidMount. Was that intended? Looks like a bug to me.
this is maybe related to #1808

[ljharb]

I don’t think it’s related to #1808.

The default ordering has statics before lifecycles: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md#rule-details so this seems like a bug.

[yannickcr]

I could not reproduce the bug with the default configuration.

@maerzhase Can you share your rule configuration ?

[maerzhase]

thats the rule config

  rules: {
    'react/jsx-filename-extension': [
      'warn',
      {
        extensions: [
          '.js',
          '.jsx',
        ],
      },
    ],
    'no-multi-spaces': [
      'error',
      {
        exceptions: {
          ImportDeclaration: true,
          VariableDeclarator: true,
        },
      },
    ],
    'no-underscore-dangle': 'off',
    'react/forbid-prop-types': 'off',
    'react/no-unused-state': 'warn',
    'no-param-reassign': [
      'error',
      {
        props: false,
      },
    ],
    'class-methods-use-this': 'off',
    'max-len': 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'react/no-unused-prop-types': 'off',
  },

i will dig inside a bit later aswell. i thought it was directly related to the last update. because freezing to 7.9.0 makes the error disappear. but of course it could be related to a combination with eslint-plugin-import and eslint-plugin-jsx-a11y

[ljharb]

@maerzhase what's your entire config tho? specifically, things like parser and parserOptions and settings

[maerzhase]

sorry...
entire config is this

module.exports = {
  parser: 'babel-eslint',
  extends: 'airbnb',
  rules: {
    'react/jsx-filename-extension': [
      'warn',
      {
        extensions: [
          '.js',
          '.jsx',
        ],
      },
    ],
    'no-multi-spaces': [
      'error',
      {
        exceptions: {
          ImportDeclaration: true,
          VariableDeclarator: true,
        },
      },
    ],
    'no-underscore-dangle': 'off',
    'react/forbid-prop-types': 'off',
    'react/no-unused-state': 'warn',
    'no-param-reassign': [
      'error',
      {
        props: false,
      },
    ],
    'class-methods-use-this': 'off',
    'max-len': 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'react/no-unused-prop-types': 'off',
  },
};

[maerzhase]

from my current test i can say that its related to add the async to the static function.
i will setup a test repo to reproduce the problem.

[maerzhase]

ok. i could reproduce it in a clean project but it seems not to be related to eslint-plugin-react but the airbnb config. the error was not thrown until i added the airbnb config to the project. so i will close the issue and checkout whats going on with the airbnb config.

thanks anyway!

[ljharb]

The airbnb config doesn’t allow async functions.

[maerzhase]

thanks for that!

[nwalters512]

@maerzhase did you ever figure this out? I'm hitting the same problem.

[maerzhase]

tbh we are no longer using airbnb config because we didn’t like some rules and use our own custome config for projects. are you using airbnb config aswell?