[Bug]: React version not specified... even if it is

[sheam]

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

Running eslint issues a warning:
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration

My config config contains:

import jestPlugin from 'eslint-plugin-jest';
import globals from 'globals';
import reactPlugin from 'eslint-plugin-react';
import reactHooksPlugin from 'eslint-plugin-react-hooks';
import unusedImportsPlugin from 'eslint-plugin-unused-imports';
import tsEslint from 'typescript-eslint';
import storybookPlugin from 'eslint-plugin-storybook';
import importPlugin from 'eslint-plugin-import';

export default tsEslint.config(
  eslint.configs.recommended,
  tsEslint.configs.recommended,
  reactPlugin.configs.flat.recommended,
  storybookPlugin.configs['flat/recommended'],
  importPlugin.flatConfigs.recommended,
  {
    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
    plugins: {
      reactPlugin,
      jestPlugin,
      'react-hooks': reactHooksPlugin, // doesn't support flatconfig yet,
      unusedImportsPlugin,
    },
    languageOptions: {
      globals: {
        ...globals.browser,
        ...jestPlugin.environments.globals.globals,
        ...globals.es2022,
        ...globals.jest,
      },
      parserOptions: {
        ecmaVersion: 2022,
        project: './tsconfig.json',
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    settings: {
      react: {
        version: 'detect',
      },
      'import/resolver-next': [
        createTypeScriptImportResolver({
          alwaysTryTypes: true,
          project: '<root>',
        }),
      ],
    },
    rules: {...}
    ignores: [
      'src/__tests__/*',
      'src/__mocks__/*',
      'src/@types',
      'scaffolding/**',
      '*.js',
      'jest-setup.ts',
    ],
  },
  prettierPlugin
);

I thought maybe it was ignoring the version: 'detect' but if I change it to version: 'bunk' I get this warning instead:

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .
Warning: React version specified in eslint-plugin-react-settings must be a valid semver version, or "detect"; got “bunk”

Changing it from 'detect' to '16.x' (which is the version we are on) still issues the warning as well.

In my package.json, I have:

  "peerDependencies": {
    "react": "^16.14.0",
  },

Expected Behavior

I would expect no warning to be issued if 'detect' is supplied.

eslint-plugin-react version

7.37.2

eslint version

9.16.0

node version

22

[LiniovasDovydas]

having the same issue. What helped was to move

  settings: {
    react: {
      version: 'detect'
    }
  }

to it's own block:

export default EslintTypeScript.config(
  // Ignores as a separate block because `files` prop ignores `ignores` property when used in the same block
  {
    ignores: ['dist'],
  },
  {
    settings: {
      react: {
        version: 'detect'
      }
    },
  },