Skip to content

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

@webmatrixxxl

Description

@webmatrixxxl

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

[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:
#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

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