'I am having a conflict error between eslint configuation and base configuration when running a react project in development

I am trying to run a react project in development but I got the following error:

Plugin "react" was conflicted between "../.eslintrc.json" and "BaseConfig » /home/crudengr/Documents/projects/***/***/web-app/node_modules/eslint-config-react-app/base.js".

The above error did not allow the page to load. I noticed that whenever I save any js file I get this error but whenever I save in package.json file the error disappears and the page loads successful.

.eslintrc.json file

{
  "parserOptions": {
      "ecmaVersion": 8,
      "requireConfigFile": false,
      "ecmaFeatures": {
          "experimentalObjectRestSpread": true,
          "jsx": true,
          "spread": true
      },
      "sourceType": "module",
      "babelOptions": {
          "presets": ["@babel/preset-react"]
       }
  },
  "env": {
      "browser": true,
      "node": true,
      "jquery": true,
      "es6": true,
      "jest": true
  },
  "plugins": [
      "react",
      "jsx-a11y"
  ],
  "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:prettier/recommended",
      "prettier"
  ],
  "globals": {
      "describe" :true,
      "context" :true,
      "before" :true,
      "beforeEach" :true,
      "after" :true,
      "afterEach" :true,
      "it" :true,
      "expect" :true,
      "workbox" :true,
      "importScripts" :true
  },
  "parser": "@babel/eslint-parser",
  "rules": {
      "no-fallthrough": "error",
      "no-unreachable": "error",
      "no-cond-assign": "error",
      "valid-typeof": "error",
      "no-func-assign": "error",
      "no-extra-semi": "error",
      "linebreak-style": [
          "error",
          "UNIX"
      ],
      "no-unused-vars": "error",
      "no-console": "off",
      "no-undef": "error",
      "no-empty": "error",
      "no-case-declarations": "error",
      "no-mixed-spaces-and-tabs": "error",
      "no-useless-escape": "error",
      "prettier/prettier": "error",
      "react/jsx-no-undef": "error",
      "react/jsx-no-bind": [
          "error",
          {
              "allowArrowFunctions": true,
              "allowBind": false,
              "ignoreRefs": false
          }
      ],
      "react/no-children-prop": "error",
      "react/no-deprecated": "error",
      "react/boolean-prop-naming": "error",
      "react/no-is-mounted": "error",
      "react/no-find-dom-node": "error",
      "react/no-did-update-set-state": "error",
      "react/no-unknown-property": "error",
      "react/no-unused-prop-types": "error",
      "react/jsx-no-duplicate-props": "error",
      "react/no-unused-state": "error",
      "react/jsx-uses-vars": "error",
      "react/prop-types": "error",
      "react/react-in-jsx-scope": "error",
      "react/no-string-refs": "error",
      "jsx-a11y/href-no-hash": [
          0
      ],
      "react/no-unescaped-entities": "error",
      "react/display-name": "error",
      "react/jsx-pascal-case": "error",
      "array-callback-return": "error",
      "no-loop-func": "error",
      "jsx-a11y/anchor-is-valid": "error",
      "prefer-const": [
          "error",
          {
              "destructuring": "any",
              "ignoreReadBeforeAssign": false
          }
      ],
      "no-var": "error"
  },
  "settings": {
      "react": {
          "version": "16.5"
      }
  }
}

/node_modules/eslint-config-react-app/base.js file

'use strict';
module.exports = {
  root: true,

  parser: '@babel/eslint-parser',

  plugins: ['react'],

  env: {
    browser: true,
    commonjs: true,
    es6: true,
    jest: true,
    node: true,
  },

  parserOptions: {
    sourceType: 'module',
    requireConfigFile: false,
    babelOptions: {
      presets: [require.resolve('babel-preset-react-app/prod')],
    },
  },

  settings: {
    react: {
      version: 'detect',
    },
  },

  rules: {
    'react/jsx-uses-vars': 'warn',
    'react/jsx-uses-react': 'warn',
  },
};

In my package json file:

"devDependencies": {
    "@babel/eslint-parser": "^7.16.5",
    "@babel/plugin-transform-react-jsx": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "babel-jest": "^27.4.5",
    "dotenv-webpack": "^7.0.3",
    "eslint": "^8.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "jest": "^27.4.5",
    "ts-jest": "^27.1.2"
  }

node version: 17 npm version: 8 OS type: Ubuntu Linux

Any fix for the above error will be appreciated. Thanks.

Solution 1:^[1]

Rename your folder "Documents" to "documents".

Solution 2:^[2]

Because create-react-app is pulling in the react eslint plugin, you shouldn't need it in your package.json config. Try removing it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Rashel
Solution 2	mcqj

'I am having a conflict error between eslint configuation and base configuration when running a react project in development

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]