Warning: React version not specified in 'eslint-plugin-react settings' while running eslint on top of React 18.2.0

Question

Issue

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

How to produce

create-react-app my-app
cd app
npm install eslint --save-dev
npx eslint --init
npx eslint .

package.json

{
  ...
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  ...
  "devDependencies": {
    "eslint": "^8.18.0",
    "eslint-plugin-react": "^7.30.1"
  }
}

I tried to find solutions but failed. I kindly ask for your help.

Reaction

Answer 1

Add this to your config in .eslintrc:

{
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

See the config here: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#configuration

Sanguinaria

This should be the answer. Not sure why it's not marked checked. – Cyzicus

Yeah, this actually works. I've accepted this answer, @BonAndreOpina – Reaction

The settings property should be added to the eslintrc.json file along with the other options like rules and plugins. – Bingham

@Bingham thanks, I wish the docs were more clear about that. – Chaworth

I just wonder why this is not the default... You have to manually add a setting to detect automatically the version – Rhombencephalon

Answer 2

Inside your folder root edit .eslintrc.js file and put "version": "detect". Like

module.exports = {
  settings: {
    react: {
     version: "detect",
    },
  },
 }

Devolve

Answer 3

If you're looking at the new eslint.config.js, I did the below (with typescript). I tried to follow the official README but it wasn't too helpful.

import react from "eslint-plugin-react";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import typescriptParser from "@typescript-eslint/parser";
import globals from "globals";
import reactRecommended from "eslint-plugin-react/configs/recommended.js";

export default [
  {
    ignores: ["dist/**/*"],
  },
  {
    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
    ignores: ["dist/**/*"],
    ...reactRecommended,
    settings: {
      version: "detect",
    },
    languageOptions: {
      ...reactRecommended.languageOptions,
      ecmaVersion: "latest",
      sourceType: "module",
      parser: typescriptParser,
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
    plugins: {
      "@typescript-eslint": typescriptEslint,
      react,
    },
    rules: {
      //rules here
    },
  },
];

Workable

Just fyi, should be: settings: { react: { version: "detect" } } (but thanks for posting this because it helped!) – Elda

Thanks gusterlover6 and @greg-jacobs Please consider updating your answer based on Greg's comment. – Titleholder

Answer 4

add this in eslint.config.mjs before languageOptions

settings: {
      react: {
        version: "detect",
      },
},
languageOptions: {
      globals: globals.node,
},

Karena

Answer 5

The problem is in the eslint-plugin-react v.7.30.1. Downgrade it to v.7.30.0 and it will work

"eslint-plugin-react": "^7.30.0"

Hypoploid