`eslint-config-react-app@7.0.0`: `@typescript-eslint/eslint-plugin` should be peer dependency

[unional]

Describe the bug

The current version of eslint-config-react-app defines @typescript-eslint/eslint-plugin and the like as dependency.
This cause eslint to fail when @typescript-eslint/eslint-plugin not resolved uniquely in the dependency tree.

Here is an example:

ESLint couldn't determine the plugin "@typescript-eslint" uniquely.

- ...\node_modules\@typescript-eslint\eslint-plugin\dist\index.js (loaded in ".eslintrc.json")
- ...\node_modules\eslint-config-react-app\node_modules\@typescript-eslint\eslint-plugin\dist\index.js (loaded in ".eslintrc.json » eslint-config-react-app#overrides[0]")

It should be declared as a peer dependency and the consuming repo install it themselves.

In a plugin architecture, when one plugin uses another plugin, it should always be a peer dependency.

This will be a breaking change and must be released as a new major release.

Did you try recovering your dependencies?

Removing lock file and node_modules will not help in this case.

I have also experience this with yarn@3 with node_modules which I tried to dedupe and cannot resolve the problem.

Even when I tried to get all parties to use the same version of @typescript-eslint/eslint-plugin (5.23.0),
It still end up having two links, one under ./node_modules and one under ./eslint-config-react-app/node_modules.

I think that is a bug on yarn@3, but the problem should also be addressed by eslint-config-react-app.

Which terms did you search for in User Guide?

• @typescript-eslint
• ESLint couldn't determine the plugin "@typescript-eslint" uniquely.
• peer dependency
• eslint-cofnig-react-app

Environment

This happens on all platforms, with npm, yarn@1-3

Steps to reproduce

Create a dummy repo with this package.json:

{
  "name": "typescript-eslint-plugin-peer-issue",
  "private": true,
  "scripts": {
    "lint": "eslint --ext=ts ."
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "5.4",
    "eslint": "^8.15.0",
    "eslint-config-react-app": "^7.0.1"
  }
}

and this .eslintrc.json:

{
  "extends": [
    "react-app"
  ],
  "plugins": [
    "@typescript-eslint"
  ]
}

create a dummy src/index.ts:

export const dummy = {}

Run:

yarn
yarn lint

Expected behavior

ESLint will work

Actual behavior

ESLint failed with:

ESLint couldn't determine the plugin "@typescript-eslint" uniquely.

- ...\node_modules\@typescript-eslint\eslint-plugin\dist\index.js (loaded in ".eslintrc.json")
- ...\node_modules\eslint-config-react-app\node_modules\@typescript-eslint\eslint-plugin\dist\index.js (loaded in ".eslintrc.json » eslint-config-react-app#overrides[0]")

Reproducible demo

https://github.com/unional/typescript-guidelines/tree/main/examples/eslint-plugin-peer

Added some more information here: https://unional.github.io/typescript-guidelines/blog/2022-eslint-plugin-peer-deps

[unional]

Dup of #11828 but with repro

[tkaabbc]

"@typescript-eslint" be declared as a peer dependency maybe is not a mistake.

Because eslint-config-react-app@7.0.0 use @rushstack/eslint-patch/modern-module-resolution. This patch allows a shared ESLint config to bring along its own plugins, rather than imposing peer dependencies on every consumer of the config. For more detail see @rushstack/eslint-patch

https://github.com/facebook/create-react-app/blob/f34d88e30c7d8be7181f728d1abc4fd8d5cd07d3/packages/eslint-config-react-app/base.js#L11

[tkaabbc]

eslint-config-react-app has already declared plugins with "@typescript-eslint", it is unnecessary declare again in your .eslintrc.json when you extend eslint-config-react-app

Remove the duplicate "@typescript-eslint" from your .eslintrc.json could resolve ESLint couldn't determine the plugin "@typescript-eslint" uniquely. It works for me.

// .eslintrc.json
{
  "extends": [
    "react-app"
  ],
}

[raDiesle]

How to "remove the duplicate from "@typescript-eslint" " in practice to resolve the issue? Not clear for me.