eslint-plugin-react icon indicating copy to clipboard operation
eslint-plugin-react copied to clipboard

[Bug]: react/jsx-sort-props is not able to sort if there is comment between properties and reported as ESLintCircularFixesWarning in ESlint 9

Open webmatrixxxl opened this issue 3 weeks ago • 1 comments

Is there an existing issue for this?

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

Description Overview

[Bug]: "react/jsx-sort-props" is not able to sort if there is a comment between properties and reported as ESLintCircularFixesWarning in ESLint 9

I found a similar issue, but with a different error: https://github.com/jsx-eslint/eslint-plugin-react/issues/3936

Image
const UsersOverview = () => {
  return (
    <>
      <Column
        visible
        allowHeaderFiltering={false}
        caption={formatMessage('organizations-addresses-country')}
        dataField="CountryCode"
        name={formatMessage('organizations-addresses-country')}
        width={isSmall || isXSmall ? 250 : 300}
        cellRender={(e) => renderGridCountry(e.data.CountryCode)}
        // setCellValue={setCountryStateValue}
        dataType="string"
      />
    </>
  );
};

If there is a comment between the props, ESLint is not able to sort the props and reports as ESLintCircularFixesWarning in ESLint v9.

2025-11-20 10:21:37.815 [error] (node:2838) ESLintCircularFixesWarning: Circular fixes detected while fixing overview.jsx.
 It is likely that you have conflicting rules in your configuration.
Image

ESlint v9 config

import react from 'eslint-plugin-react';
import globals from 'globals';
export default [
  // --- Global ignores (replaces .eslintignore) ---
  {
    ignores: ['node_modules', 'dist', 'build', '.husky', '.vscode'],
  },
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2021,
      sourceType: 'module',
      globals: {
        ...globals.browser,
        ...globals.node,
      },
      parserOptions: {
        ecmaFeatures: { jsx: true },
      },
    },

    plugins: {
      react,
    },
    rules: {
      'react/jsx-sort-props': [
        'warn',
        {
          callbacksLast: true,
          shorthandFirst: true,
          shorthandLast: false,
          multiline: 'last',
          ignoreCase: true,
          noSortAlphabetically: false,
        },
      ],
    },
  },
];

Expected Behavior

I guess there could be 2 ways it can behave:

  1. Ignore the comments and reorder the props
Image
  1. Keep a track of the lines of comment and move them together with the props. Image

eslint-plugin-react version

v7.37.5

eslint version

v9.39.1

node version

22.21.0

webmatrixxxl avatar Nov 20 '25 08:11 webmatrixxxl