CODEWITHSUNDEEP
reactjseslint
Hotaka
Hotaka

Reputation: 843

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

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.

Upvotes: 84

Views: 68181

Answers (7)

raptoria7
raptoria7

Reputation: 969

using the new eslint flat config, you can add this to the default generated config:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  {
    ...pluginReact.configs.flat.recommended,
    settings: {
      react: {
        version: "detect",
      },
    },
  },
  eslintConfigPrettier
];

Upvotes: 11

gusterlover6
gusterlover6

Reputation: 737

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: {
      react: {
        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
    },
  },
];

Upvotes: 27

Manoj
Manoj

Reputation: 1

Above answers are correct just wanted highlight about config file as I was not aware of new config file until I read below documentation. https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#configuration

Files .eslintrc* - used in old version( prior to v8.21.0).

File eslint.config.js - used in newer version .

So make sure, you are adding the fix in correct file.

Upvotes: 0

Sylvain Codes
Sylvain Codes

Reputation: 145

add this in eslint.config.mjs before languageOptions

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

Upvotes: 9

Mark
Mark

Reputation: 2524

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

Upvotes: 195

Ashwani Panwar
Ashwani Panwar

Reputation: 4578

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

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

Upvotes: 15

imransilvake
imransilvake

Reputation: 3

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"

Upvotes: -10

Related Questions