[Bug]: Warning: React version not specified in eslint-plugin-react settings

[SalahAdDin]

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

We just migrated our configuration file to ESLint 9, we followed the latest documentation, and everything is going well.

Our configuration is as follows:

import globals from "globals";
import js from "@eslint/js";
import typescript from "typescript-eslint";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import playwright from "eslint-plugin-playwright";
import sonarJs from "eslint-plugin-sonarjs";
import vitest from "eslint-plugin-vitest";
import jsxA11y from "eslint-plugin-jsx-a11y";
import prettier from "eslint-config-prettier";
import stylistic from "@stylistic/eslint-plugin";
import query from "@tanstack/eslint-plugin-query";

export default [
  // { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  {
    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
    ...react.configs.flat.recommended,
    plugins: {
      react,
      reactHooks,
      "@stylistic": stylistic,
    },
    languageOptions: {
      ...react.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.browser,
        ...globals.es2021,
      },
    },
    rules: {
      "react/function-component-definition": [
        2,
        { namedComponents: "arrow-function" },
      ],
      "react/hook-use-state": 2,
      "react/jsx-handler-names": 2,
      "react/require-default-props": [
        "error",
        {
          functions: "defaultArguments",
        },
      ],
      "@stylistic/comma-dangle": [
        "error",
        {
          arrays: "only-multiline",
          objects: "only-multiline",
          imports: "only-multiline",
          exports: "only-multiline",
          functions: "never",
        },
      ],
      "@stylistic/function-paren-newline": "warn",
      "@stylistic/implicit-arrow-linebreak": "warn",
      "@stylistic/indent": ["error", 2],
      "@stylistic/object-curly-newline": [
        "error",
        {
          ExportDeclaration: { multiline: true, minProperties: 5 },
        },
      ],
      "@stylistic/operator-linebreak": "warn",
      "@stylistic/quotes": ["error", "double"],
      "@stylistic/semi": "error",
    },
  },
  // react.configs.flat.recommended,
  ...query.configs["flat/recommended"],
  {
    ignores: [
      "coverage/",
      "dist/",
      "node_modules/",
      "public/mockServiceWorker.js",
    ],
    languageOptions: {
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
        ...globals.es2021,
      },
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  js.configs.recommended,
  ...typescript.configs.recommendedTypeChecked,
  {
    rules: {
      "@typescript-eslint/array-type": [
        "error",
        {
          default: "generic",
        },
      ],
      "@typescript-eslint/ban-ts-comment": "error",
      "@typescript-eslint/consistent-type-definitions": ["error", "type"],
      "@typescript-eslint/explicit-function-return-type": 1,
      "@typescript-eslint/naming-convention": [
        "error",
        {
          selector: "typeParameter",
          format: ["PascalCase"],
          custom: { regex: "^T[A-Z]", match: true },
        },
      ],
      "@typescript-eslint/switch-exhaustiveness-check": "error",
    },
  },
  jsxA11y.flatConfigs.recommended,
  sonarJs.configs.recommended,
  {
    files: ["src/**/*.test.[tj]s?(x)"],
    ignores: ["src/**/*.e2e.test.[tj]s?(x)"],
    plugins: {
      vitest,
    },
    rules: {
      ...vitest.configs.all.rules,
      "vitest/valid-title": [
        "error",
        {
          mustMatch: {
            it: [
              "^should.*when.+$",
              "Test title must include 'should' and 'when'",
            ],
          },
        },
      ],
    },
    settings: {
      vitest: {
        typecheck: true,
      },
    },
    languageOptions: {
      globals: {
        ...vitest.environments.env.globals,
      },
    },
  },
  {
    ...playwright.configs["flat/recommended"],
    files: ["tests/**/*.test.[tj]s?(x)"],
  },
  prettier,
];

But when running the linter we get the following warning:

 pnpm lint:fix                                                                                                                                                                                                                                                                                                                    INT ✘ 

> react-ts-vite-template@1.2.6 lint:fix /media/Storage/Projects/Experiments/react-ts-vite-template
> pnpm lint --fix

> react-ts-vite-template@1.2.6 lint /media/Storage/Projects/Experiments/react-ts-vite-template
> eslint src "--fix"

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

We are following the documentation and there is nothing about settings there, what is missing then?

Expected Behavior

It should not give us any warning.

eslint-plugin-react version

7.35.0

eslint version

9.9.0

node version

20.15.1

[reatexpk]

@SalahAdDin, I was facing the same warning just now after creating a Vite template. I also thought that was a bug. But after adding settings: { react: { version: '18.3' } } in my ESLint config it seems to work fine now. Maybe it will help you as well.

[SalahAdDin]

@SalahAdDin, I was facing the same warning just now after creating a Vite template. I also thought that was a bug. But after adding settings: { react: { version: '18.3' } } in my ESLint config it seems to work fine now. Maybe it will help you as well.

does that option exist in the latest ESLint version?

[ljharb]

It's never not existed, afaik.

[SalahAdDin]

settings: { react: { version: '18.3' } }

Well, it worked!