Bug: Error in ESLint Plugin disambiguation in a monorepo

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: Version: 1.64.2 (Universal) [LTS] ✅
• OS Version: OS: Darwin arm64 21.3.0

Issue description 📔

Hey, I’ve got a monorepo set up with multiple eslint configurations, however since the latest update I am unable to get my local vscode build of ESLint to work

• Anecdotally, the same configuration does work on WebStorm my colleagues are using, which makes me presume this is an issue with vscode eslint detecting incorrect configuration in the monorepo.
• Running the react application via yarn start does run on node correctly, including ESLint warning and Errors. They just fail to compile inside VSCode.

The repo directory is set up in the following way:

.eslintrc
package.json
src/
   -- files
web/
   .eslintrc
   .packagejson
   -- files

However since the latest merge I can’t get my ESLint to run locally in VSCode. Producing the following error:

Error - 11:59:38 AM] Error: Plugin “@typescript-eslint” was conflicted between “.eslintrc#overrides[0]” and “…/.eslintrc#overrides[0]”. at mergePlugins (/Users/samuel/Coding/staffers/web/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:1673:19) at createConfig (/Users/samuel/Coding/staffers/web/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:1776:9) at ConfigArray.extractConfig (/Users/samuel/Coding/staffers/web/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:1952:33) at CLIEngine.isPathIgnored (/Users/samuel/Coding/staffers/web/node_modules/eslint/lib/cli-engine/cli-engine.js:991:18) at CLIEngine.executeOnText (/Users/samuel/Coding/staffers/web/node_modules/eslint/lib/cli-engine/cli-engine.js:900:38) at ESLint.lintText (/Users/samuel/Coding/staffers/web/node_modules/eslint/lib/eslint/eslint.js:607:23) at /Users/samuel/.vscode/extensions/dbaeumer.vscode-eslint-2.2.1/server/out/eslintServer.js:1:178563 at Ce (/Users/samuel/.vscode/extensions/dbaeumer.vscode-eslint-2.2.1/server/out/eslintServer.js:1:184511) at /Users/samuel/.vscode/extensions/dbaeumer.vscode-eslint-2.2.1/server/out/eslintServer.js:1:178521 at /Users/samuel/.vscode/extensions/dbae

What did you expect to happen?

I’d expect ESLint to run locally with the correct eslint configuration without disambiguation errors in the relative folder in the mono-repo, as

.eslintrc
  web/
     .eslintrc

Are two differnet configurations and obviously to use eslint plugins only from the relevant part of the repository.

What actually happened?

This seems to be an issue with ESLint not being able to disambigue which configuration to use.

What I tried 🔎

• Setting the parameter "root": true in the base .eslintrc in the project
• Changing the working directory settings to

# .vscode/settings.json
{
  "eslint.workingDirectories": [
    "web",
    "src",
  ]
}

• Adding detection mode to auto in global vscode settings

# Code/User/settings.json
{
   ...
   "eslint.workingDirectories": [{ "mode": "auto" }]
}

The one in web/package.json is defined as

eslint --ext .jsx,.js,.ts,.tsx src/

The repo is managed by yarn, so yarn eslint --ext .jsx,.js,.ts,.tsx src/ returns similar error as mentioned above

yarn eslint --ext .jsx,.js,.ts,.tsx src/                               2 ✘  23s   12:24:29  
yarn run v1.22.17
warning ../../package.json: No license field
$ /Users/samuel/Coding/staffers/web/node_modules/.bin/eslint --ext .jsx,.js,.ts,.tsx src/

Oops! Something went wrong! :(

ESLint: 8.8.0

ESLint couldn't determine the plugin "jsx-a11y" uniquely.

- /Users/samuel/Coding/staffers/web/node_modules/eslint-plugin-jsx-a11y/lib/index.js (loaded in ".eslintrc » @webscopeio/eslint-config » eslint-config-airbnb » /Users/samuel/Coding/staffers/web/node_modules/eslint-config-airbnb/rules/react-a11y.js")
- /Users/samuel/Coding/staffers/node_modules/eslint-plugin-jsx-a11y/lib/index.js (loaded in "../.eslintrc » @webscopeio/eslint-config » eslint-config-airbnb » /Users/samuel/Coding/staffers/node_modules/eslint-config-airbnb/rules/react-a11y.js")

Please remove the "plugins" setting from either config or remove either plugin installation.

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The error which gets thrown depending on whether I have settings.json in my .vscode folder. Without it:

npx eslint .

Returns the same result.

Running yarn start which is equivalent to craco start runs correctly and displays eslint errors and warnings

# ... skipped some warnings here for text clarity

src/staffers/api/storage/getPath.ts
  Line 76:3:  Expected no linebreak before this expression  implicit-arrow-linebreak

src/util/flatMap.ts
  Line 15:5:  Expected no linebreak before this expression  implicit-arrow-linebreak

src/util/index.ts
  Line 24:5:  Expected no linebreak before this expression  implicit-arrow-linebreak
  Line 43:3:  Expected no linebreak before this expression  implicit-arrow-linebreak

8 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in src/components/badges/Badge.tsx
  Line 4:9:  Don't use `Function` as a type. The `Function` type accepts any function-like value.
It provides no type safety when calling the function, which can be a common source of bugs.
It also accepts things like class declarations, which will throw at runtime as they will not be called with `new`.
If you are expecting the function to accept certain arguments, you should explicitly define the function shape  @typescript-eslint/ban-types

src/components/checkbox/CustomCheckbox.tsx
  Line 19:5:  Missing an explicit type attribute for button  react/button-has-type

src/components/companiesOverview/CompanyItemMin.tsx
  Line 35:22:  Unexpected require()  global-require

Search for the keywords to learn more about each error.

webpack 5.68.0 compiled with 1 error and 11 warnings in 52792 ms
No issues found.

With .vscode/settings.json it seemingly resolves eslint-plugin-jsx-a11y issue, but the issue with @typescript-eslint still persists.

    ~/Coding/staffers/web    update/typescript-web-2 !2 ?2  yarn lint                                                                      2 ✘  12:29:54  
yarn run v1.22.17
warning ../../package.json: No license field
$ eslint --ext .jsx,.js,.ts,.tsx src/

Oops! Something went wrong! :(

ESLint: 8.8.0

ESLint couldn't determine the plugin "jsx-a11y" uniquely.

- /Users/samuel/Coding/staffers/web/node_modules/eslint-plugin-jsx-a11y/lib/index.js (loaded in ".eslintrc » @webscopeio/eslint-config » eslint-config-airbnb » /Users/samuel/Coding/staffers/web/node_modules/eslint-config-airbnb/rules/react-a11y.js")
- /Users/samuel/Coding/staffers/node_modules/eslint-plugin-jsx-a11y/lib/index.js (loaded in "../.eslintrc » @webscopeio/eslint-config » eslint-config-airbnb » /Users/samuel/Coding/staffers/node_modules/eslint-config-airbnb/rules/react-a11y.js")

Please remove the "plugins" setting from either config or remove either plugin installation.

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Lastly, running global installation of eslint from my .npm does work correctly

    ~/Coding/staffers/web    update/typescript-web-2 !1 ?1  eslint --ext .jsx,.js,.ts,.tsx src/

# ... skipped lines for clarity

/Users/samuel/Coding/staffers/web/src/util/index.ts
  24:5  warning  Expected no linebreak before this expression  implicit-arrow-linebreak
  43:3  warning  Expected no linebreak before this expression  implicit-arrow-linebreak

✖ 2942 problems (23 errors, 2919 warnings)
  13 errors and 2262 warnings potentially fixable with the `--fix` option.

Participation

• I am willing to submit a pull request for this issue.

Additional comments

No response

[scottalguire]

My team is also facing this issue, however we experience it running ESLint from any command line (unrelated to VS Code).

$ eslint 'src/**/*.{js,ts,tsx}' --fix --max-warnings=0

Oops! Something went wrong! :(

ESLint: 8.10.0

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

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

Please remove the "plugins" setting from either config or remove either plugin installation.

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

error Command failed with exit code 2.

Our eslint related dev dependencies look like this:

"@typescript-eslint/eslint-plugin": "5.13.0",
"@typescript-eslint/parser": "5.13.0",
"eslint": "8.10.0",
"eslint-config-prettier": "8.5.0",
"eslint-config-react-app": "7.0.0",
"eslint-plugin-cypress": "2.12.1",
"eslint-plugin-flowtype": "8.0.3",
"eslint-plugin-import": "2.25.4",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.29.3",
"eslint-plugin-react-hooks": "4.3.0",

What I’ve discovered is eslint-config-react-app includes the @typescipt-eslint plugin here, and our eslint config file in the root of our project was also listing @typescipt-eslint under plugins, and 'plugin:@typescript-eslint/recommended' under extends. I compared the dependency versions for “@typescript-eslint/eslint-plugin” and sure enough, our project listed “5.13.0” while eslint-config-react-app listed “^5.5.0” as you can see here.

TL;DR By downgrading our project devDependency to "@typescript-eslint/eslint-plugin": "^5.5.0", to match eslint-config-react-app, eslint now resolves “@typescript-eslint” and runs successfully.

@MichaelPhan

[github-actions[bot]]

Oops! It looks like we lost track of this issue. What do we want to do here? This issue will auto-close in 7 days without an update.