Skip to content

[Bug]: react/jsx-sort-props causes errors when an inline comment follows a JSX prop #3936

@hamirmahal

Description

@hamirmahal

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
  • My issue appears in the command-line and not only in the text editor

Description Overview

Reproduction:

const ProblematicComponent: React.FC = () => {
	return (
		<div
			onClick={() => console.log()} // Comment
			className={'flex'}>
			<span>Problematic Component</span>
		</div>
	)
}

Actual behavior:

  • eslint updates the file to
const ProblematicComponent: React.FC = () => {
	return (
		<div
			className={'flex'}
			onClick={() => console.log()} // Comment>
			<span>Problematic Component</span>
		</div>
	)
}

export default ProblematicComponent

and multiple errors pop up, like

JSX expressions must have one parent element. ts (2657)

and

Parsing error: Identifier expected. eslint

ESLint config:

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-sort-props": ["error"]
  }
}

Expected Behavior

Expected behavior:

  • No autofix corruption or mis-sorting.
  • Comment should remain properly attached to onClick.

eslint-plugin-react version

^7.34.2

eslint version

^8.40.0

node version

v22.16.0

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions