Create-react-app - ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig"

Question

After updating to CRA 5.0.0, I got this error on compilation process:

ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig » "..\react-app\node_modules\eslint-config-react-app\base.js".

My eslint configuration is:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "plugin:react/jsx-runtime"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {...}
}

Any solutions/fixes?

Answer 1

The problem:

eslint-plugin-react version in your project's dependency is "different" from the one in eslint-config-react-app package's dependency, hence "conflicting".

The solution:

Avoid deleting the .lock file as many suggested here (it's there for a reason). Instead, dedupe its entries and then re-install.

npm:

npm dedupe && npm i

yarn v1:

npx yarn-deduplicate && yarn

yarn v3+:

yarn dedupe

pnpm:

pnpm dlx pnpm-deduplicate && pnpm i

pnpm v8.3.0+:

pnpm dedupe && pnpm i