Eslint Plugin "react"was conflicted between .eslintrc.json >> eslint-config-airbnb

Question

When I start the app with yarn start I get below comment in terminal. I guess it's airbnb plug-in which makes some mess as when I comment it out in eslintrc.json the app compiles and I can work in it. Shall I remove airbnb plug-in or there is another solution to fix it ? I was already issues with such error but actually none of them worked for me, that's why I ask specifically.

[eslint] Plugin "react" was conflicted between ".eslintrc.json » eslint-config-airbnb » C:\Users\marci\OneDrive\Pulpit\300B\bdb\bdb-front\node_modules\eslint-config-airbnb\rules\reacERROR in [eslint] Plugin "react" was conflicted between ".eslintrc.json » eslint-config-airbnb » C:\Users\marci\OneDrive\Pulpit\300B\bdb\bdb-front\node_modules\eslint-config-airbnb\rules\react-a11y.js" and "BaseConfig » C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\eslint-config-react-app\base.js".

this is how my .eslintrc.json looks like:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "globals": {
    "JSX": "readonly"
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:react/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "airbnb",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "tsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [ "@typescript-eslint", "prettier"],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "ignorePatterns": ["src/serviceWorkerRegistration.ts", "src/service-worker.ts"],
  "rules": {
    "prefer-regex-literals": "off",
    "global-require": "off",
    "import/no-dynamic-require": "off",
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["error"],
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-empty-function": "off",
    "react-hooks/exhaustive-deps": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-empty-interface": "off",
    "import/prefer-default-export": "off",
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off",
    "no-new-func": "off",
    "jsx-a11y/media-has-caption": "off",
    "jsx-a11y/label-has-associated-control": [
      "error",
      {
        "required": {
          "some": ["nesting", "id"]
        }
      }
    ],
    "jsx-a11y/label-has-for": [
      "error",
      {
        "required": {
          "some": ["nesting", "id"]
        }
      }
    ],
    "react/function-component-definition": "off",
    "no-unused-vars": "off",
    "no-use-before-define": "warn",
    "no-nested-ternary": "off",
    "no-param-reassign": "warn",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx", ".*"] }],
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

thanks & regards

Can you show you entire eslintrc.json file. There is a conflict between the two. so rules that are required in one conflict with rules in the other so you can't have both. You may need to add some react rules, plugins and parserOptions for a better experience. Or if you like I can share my simple prefered eslint rules for typescript. — Colin Hale, Oct 06 '22 at 20:53
edited the post by eslintrc.json. Please also share Your prefered eslint rules for typescript — marcinb1986, Oct 07 '22 at 09:42

score 0 · Answer 1 · answered Oct 07 '22 at 17:06

Ok, I think your issue is with the plugin:react/recommended and the airbnb you will need to remove one of those. I suggest keeping the pluhin:react/recommended.

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest":true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
    ],
    "overrides": [],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-hooks",
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off",
        "camelcase": "error",
        "spaced-comment": "error",
        "quotes": ["error", "double"],
        "no-duplicate-imports": "error",
        "no-console": "warn",
        "react/prop-types": "off"
    },
    "settings": {
        "import/resolver": {
          "typescript": {}
        }
    },
    "ignorePatterns": ["build/*"]
}

Found the solution, maybe will help to someone. If You look at the project directory from the error I added in the post You can see that eslintrc.json reflects to directory with /BDB/ - capital letters, but BaseConfig has it as /bdb/ . I have changed folder directory to regular font ( /bdb/) and it works now — marcinb1986, Oct 09 '22 at 18:47

Eslint Plugin "react"was conflicted between .eslintrc.json >> eslint-config-airbnb

1 Answers1