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?

Answer 1

您可能需要在您的锁定文件中对 eslint-plugin-react 进行重复数据删除。

Answer 2

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

Answer 3

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:)

Answer 4

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.

Answer 5

yarn remove eslint-config-react-app yarn add eslint-config-react-app@6

yarn run eslint --initc
//Reinicia la configuracion de eslist y permite que //automaticamente coloque los paquetes q falten

// quita los errores automaticamente con . y --fix

npx eslint . --fix

Answer 6

Been there too, and finding the exact answer to this issue is hard to find.

The best solution for now is to remove eslintrc.json .

Answer 7

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