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.

Adri w Ukraine · Accepted Answer · 2025-06-18 09:46:22Z

208

Add this to your config in ESLint Config File, i.e. .eslintrc or eslint.config.js

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

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

Docs

https://eslint.org/docs/

https://eslint.org/docs/latest/use/configure/migration-guide

https://eslint.org/docs/latest/use/configure/configuration-files

edited Jun 18 at 9:46

Adri w Ukraine

20.2k19 gold badges107 silver badges140 bronze badges

answered Jul 17, 2022 at 20:01

Mark

2,6842 gold badges15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Bon Andre Opina Over a year ago

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

alex-jesper Over a year ago

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

Robo Robok Over a year ago

@alex-jesper thanks, I wish the docs were more clear about that.

Tonio Over a year ago

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

Cameron Hudson Dec 15, 2024 at 17:35

This configuration is incompatible with modern eslint. Refer to this answer for the correct config: stackoverflow.com/a/79105862/7023816

|

gusterlover6 · Accepted Answer · 2025-10-23 13:43:41Z

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

The link to officel github docs does already describe the approach of customisation.
Thanks! :) Note to others: This is only for eslint 8 and above (e.g. flatfile config)

Ashwani Panwar · Accepted Answer · 2023-03-16 13:40:23Z

15

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

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

answered Mar 16, 2023 at 13:40

Ashwani Panwar

4,6763 gold badges53 silver badges78 bronze badges

Comments

raptoria7 · Accepted Answer · 2024-10-19 20:23:36Z

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
];

Sylvain Codes · Accepted Answer · 2024-07-18 21:31:48Z

9

add this in eslint.config.mjs before languageOptions

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

answered Jul 18, 2024 at 21:31

Sylvain Codes

1451 silver badge4 bronze badges

Comments

Ramin Rezaei · Accepted Answer · 2025-03-17 16:02:31Z

it's worked for me on the new version of the eslint congigs!

eslint.config.js


import eslintConfigPrettier from 'eslint-config-prettier/flat';
import pluginReact from 'eslint-plugin-react';
import { globalIgnores } from 'eslint/config';
import tseslint from 'typescript-eslint';
import pluginJs from '@eslint/js';
import globals from 'globals';

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ['**/*.{js,ts,jsx,tsx}'] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  pluginReact.configs.flat['jsx-runtime'],
  eslintConfigPrettier,
  globalIgnores([
    'dist/',
    'build/',
    '.vscode/',
    '.history/',
    'coverage/',
    'node_modules/'
  ]),
  {
    settings: {
      react: {
        version: 'detect'
      }
    }
  }
];

Manoj · Accepted Answer · 2024-08-12 02:04:15Z

0

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.

answered Aug 12, 2024 at 2:04

Manoj

11 bronze badge

Comments

imransilvake · Accepted Answer · 2022-07-07 11:56:48Z

-10

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"

answered Jul 7, 2022 at 11:56

imransilvake

32 bronze badges

Collectives™ on Stack Overflow

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

Issue

How to produce

package.json

8 Answers 8

Docs

6 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

Issue

How to produce

package.json

8 Answers 8

Docs

6 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Related