在开发中运行反应项目时，我在 eslint 配置和基本配置之间遇到冲突错误

Question

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.

Answer 1

Rename your folder "Documents" to "documents".

Answer 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.

Answer 3

Keep names of all the directories (including your react-app directory) in all lowercase. Hopefully it will solve your problem.