react/jsx-sort-props breaks the code

Tell us about your environment

"babel-eslint": "^9.0.0",
"eslint": "5.6.0",
"eslint-plugin-react": "^7.11.1"

• ESLint Version: 9.0.0
• Node Version: 10.6.0
• npm Version: -
• yarn Version: 1.9.4

What parser (default, Babel-ESLint, etc.) are you using? Babel-ESLint

Please show your full configuration: I created a repo to reproduce the bug: https://github.com/davesnx/eslint-bug-react-sort-props

Configuration

module.exports = {
  parser: 'babel-eslint',
  plugins: ['react'],
  rules: {
    'react/jsx-sort-props': 1
  }
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

import React, { Component } from 'react'
import PropTypes from 'prop-types'

const PictureChoice = () => {
  return (
    <List
      className={className}
      onStageAnswer={onStageAnswer}
      onCommitAnswer={onCommitAnswer}
      isFocused={isFocused}
      direction={direction}
      allowMultipleSelection={allowMultipleSelection}
      measureLongestChildNode={measureLongestChildNode}
      layoutItemsSize={layoutItemsSize}
      handleAppScroll={handleAppScroll}
      isActive={isActive}
      resetSelection={resetSelection}
      onKeyboardChoiceHovered={onKeyboardChoiceHovered}
      keyboardShortcutType
    />
  )
}

export default PictureChoice

npx eslint . --fix

What did you expect to happen? So theorically the rule should re-order my props, in the worst case scenario, not sort them. But actually is breaking them. It’s a weird output:

import React, { Component } from 'react'
import PropTypes from 'prop-types'

const PictureChoice = () => {
  return (
    <List
      allowMultipleSelection={allowMultipleSelection}
      className={className}
      direction={direction}
      isFocused=handleAppScroll={handleAppScroll}ection=isActive={isActive}owMultiplisFocused={isFocused}ardShortcutType
      layoutItemsSize={layoutItemsSl
      layoutItemsSize={layoutItemsSize}
      handleAppScroll={handleAppScroll}
      isActive={isActive}
      resetSelection={resetSelection}
      onKeyboardChoiceHovered={onKeyboardChoiceHovered}
      keyboardShortcutType
    />
  )
}

export default PictureChoice

[ilyavolodin]

This looks like a bug in eslint plugin, not a bug in the eslint itself. Closing.

[platinumazure]

@davesnx Thanks!

It’s highly unlikely this is a core ESLint issue. Basically one of two things is happening:

1. babel-eslint might be producing an incorrect AST (with incorrect node range information) which could throw off the autofixer
2. The rule itself is producing bad autofix range information

I think it makes the most sense to start with eslint-plugin-react so they can see if the rule is incorrect, and then they might redirect you to babel-eslint if the parser ends up being the issue. Or, who knows, maybe there is a core issue after all 😄 But I think eslint-plugin-react should look at the rule first.