nextjs doesn't support eslint-config-airbnb

Current Behavior

I try to integrate eslint-config-airbnb into my workspace but without success. It works with a standalone Nextjs app, without NX.

Expected Behavior

I want to extend my eslint’s config with the airbnb eslint plugin.

Steps to Reproduce

repro repo

1. npx create-nx-workspace
2. choose nextjs template
3. npm i -D eslint-config-airbnb
4. drop "extends": ["airbnb"], into /.eslintrc.json
5. navigate to any .tsx file
6. see the following error:

Failure Logs

Error: Plugin "jsx-a11y" was conflicted between ".eslintrc.json » eslint-config-next/core-web-vitals » /home/boris/projects/acme/node_modules/eslint-config-next/index.js" and ".eslintrc.json » ../../.eslintrc.json » eslint-config-airbnb » /home/boris/projects/acme/node_modules/eslint-config-airbnb/rules/react-a11y.js".

Error: Plugin "jsx-a11y" was conflicted between ".eslintrc.json » eslint-config-next/core-web-vitals » /home/boris/projects/acme/node_modules/eslint-config-next/index.js" and ".eslintrc.json » ../../.eslintrc.json » eslint-config-airbnb » /home/boris/projects/acme/node_modules/eslint-config-airbnb/rules/react-a11y.js".
    at mergePlugins (/home/boris/projects/acme/node_modules/@eslint/eslintrc/lib/config-array/config-array.js:201:19)
    at createConfig (/home/boris/projects/acme/node_modules/@eslint/eslintrc/lib/config-array/config-array.js:304:9)
    at ConfigArray.extractConfig (/home/boris/projects/acme/node_modules/@eslint/eslintrc/lib/config-array/config-array.js:480:33)
    at CLIEngine.isPathIgnored (/home/boris/projects/acme/node_modules/eslint/lib/cli-engine/cli-engine.js:982:18)
    at ESLint.isPathIgnored (/home/boris/projects/acme/node_modules/eslint/lib/eslint/eslint.js:679:26)
    at ESLint8Plugin.<anonymous> (/home/boris/.local/share/JetBrains/Toolbox/apps/WebStorm/ch-0/213.5744.224/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:155:57)
    at step (/home/boris/.local/share/JetBrains/Toolbox/apps/WebStorm/ch-0/213.5744.224/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:44:23)
    at Object.next (/home/boris/.local/share/JetBrains/Toolbox/apps/WebStorm/ch-0/213.5744.224/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:25:53)
    at /home/boris/.local/share/JetBrains/Toolbox/apps/WebStorm/ch-0/213.5744.224/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:19:71
    at new Promise (<anonymous>)

Environment

  Node : 14.17.3
  OS   : linux x64
  npm  : 6.14.13
  
  nx : 13.3.6
  @nrwl/angular : undefined
  @nrwl/cli : 13.3.6
  @nrwl/cypress : 13.3.6
  @nrwl/devkit : 13.3.6
  @nrwl/eslint-plugin-nx : 13.3.6
  @nrwl/express : undefined
  @nrwl/jest : 13.3.6
  @nrwl/linter : 13.3.6
  @nrwl/nest : undefined
  @nrwl/next : 13.3.6
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : 13.3.6
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.6
  @nrwl/web : 13.3.6
  @nrwl/workspace : 13.3.6
  @nrwl/storybook : 13.3.6
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 6.6.7
  ---------------------------------------
  Community plugins:

[BorisZubchenko]

From now, adding "airbnb/hooks" gives me the following error:

Plugin "react-hooks" was conflicted between "apps/site/.eslintrc.json » eslint-config-next/core-web-vitals » /home/boris/projects/repo/node_modules/eslint-config-next/index.js » plugin:react-hooks/recommended" and "apps/site/.eslintrc.json » ../../.eslintrc.json » eslint-config-airbnb/hooks » /home/boris/projects/repo/node_modules/eslint-config-airbnb/rules/react-hooks.js".

[kirjai]

thanks for opening the issue!

• looks like the difference in the jsx-a11y plugin comes from the fact that npm installs two different versions of eslint-plugin-jsx-a11y at the same time. one is in node_modules, and one in node_modules/eslint-config-next/node_modules.

• @nrwl/react depends on eslint-plugin-jsx-a11y@^6.4.1

• eslint-config-next depends on eslint-plugin-jsx-a11y@^6.5.1

looks like there’s a similar problem with eslint-plugin-react - 7.23.1 vs 7.27.0

---

steps on the Nx side:

• we’ll bring the versions of eslint-plugin-jsx-a11y and eslint-plugin-react that Nx depends on to match those of eslint-config-next

---

what you can do right now to fix this yourself:

• install eslint-plugin-jsx-a11y@^6.5.1 and eslint-plugin-react@^7.27.0 in your project
• run npm dedupe

based on what i see locally myself - that should solve the problem.

note that once we’ll release a fix that matches the versions of those plugins - you might need to run npm dedupe if the problem persists. Sometimes, once npm gets into a weird state like that - it’s hard to correct it, sadly…