jsx-eslint/eslint-plugin-react

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

Open

#3936 aperta il 6 lug 2025

Vedi su GitHub
 (1 commento) (0 reazioni) (0 assegnatari)JavaScript (2797 fork)batch import
bughelp wanted

Metriche repository

Star
 (8630 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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

Guida contributor