Plugin "react" was conflicted between ".eslintrc.js" and "BaseConfig

Question

After I set up ESLint, I got this error Plugin "react" was conflicted between ".eslintrc.js" and "BaseConfig » /frontend/node_modules/react-scripts/node_modules/eslint-config-react-app/base.js".

my .eslintrc.js is like

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  ignorePatterns: [
    ".eslintrc.js"
  ],
  rules: {
    'no-use-before-define': "off",
    "@typescript-eslint/no-use-before-define": "off",
    'import/prefer-default-export': "off",
    'import/extensions': [
      'error',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['.jsx', '.tsx'],
      },
    ],
    'react/react-in-jsx-scope': 'off',
    'no-void': [
      'error',
      {
        allowAsStatement: true,
      },
    ],
    "react/function-component-definition": [
      2,
      { "namedComponents": "arrow-function" }
    ]
  },
  settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.tsx']
      },
    },
  },
};

What I have done is

• npx create-react-app my-app --template typescript
• yarn run eslint --init
• yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
• npx install-peerdeps --dev eslint-config-airbnb

How can I remove this error ?

Longwise

Answer 1

You have to disable eslint while react-scripts start.

As of react-scripts v4.0.2, you can now opt out of ESLint with an environment variable. You can do this by adding it to your .env file, or by prefixing your scripts in your package.json file.

For example in .env:

DISABLE_ESLINT_PLUGIN=true

Nenitanenney

Outstanding — I was able to create a production build without failure just by adding this line to the .env file. Many thanks. – Heilner

i don't think disabling eslint is a solution, other than hiding the error. I was able to fix this by deleting lock file and re-running installer – Kemper

eslint should be non-intrusive, if not disabling it completely is fair enough – Gyroscope

Answer 2

I fixed this problem in this way: if you are using npm remove the package-lock.json file. if you are using the yarn remove the yarn.lock file.

and then remove the node_module folder and install all of the dependencies again.

Hypophosphate

Answer 3

You may need to dedupe eslint-plugin-react in your lockfile.

Frameup

Running yarn upgrade sorted this for me. – Aright

Answer 4

I fixed the issue by closing and reopening the project folder with code. There must have been a problem with the path name.

Hope this helps :)

Cutup

What do you mean I fixed the issue by closing and reopening the project folder with code? – Arenas

@UgniusMalūkas In a terminal cd into the project folder and type code . – Cutup

Answer 5

I faced the same error. After trying every solution I found on the internet, removing eslintrc.js actually helped.

Faunia

removing eslintrc.js removes all the rules. I am not sure OP wanted to remove all linting rules. – Cosgrove