Failed to install @typescript-eslint/eslint-plugin

Question

I started installing eslint plugins but I found an issue with @typescript-eslint/eslint-plugin.

It requires installing it using --legacy-peer-deps, however, this can lead to potential bugs (Accept an incorrect (and potentially broken) dependency resolution.)

Env:

Next.js version 13.4.8.

Steps:

npm install @typescript-eslint/eslint-plugin.

Expected:

The package should be installed.

Current:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: credium-gersthofen-app@0.1.0
npm ERR! Found: @typescript-eslint/parser@5.62.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   @typescript-eslint/parser@"^5.42.0" from eslint-config-next@13.4.8
npm ERR!   node_modules/eslint-config-next
npm ERR!     eslint-config-next@"13.4.8" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @typescript-eslint/eslint-plugin@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @typescript-eslint/parser@6.2.1
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   peer @typescript-eslint/parser@"^6.0.0 || ^6.0.0-alpha" from @typescript-eslint/eslint-plugin@6.2.1
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     @typescript-eslint/eslint-plugin@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/alaeddine/.npm/_logs/2023-08-03T12_17_06_200Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/alaeddine/.npm/_logs/2023-08-03T12_17_06_200Z-debug-0.log

package.json:

  "dependencies": {
    "@reduxjs/toolkit": "^1.9.5",
    "@types/node": "20.4.0",
    "@types/react": "18.2.14",
    "@types/react-dom": "18.2.6",
    "chart.js": "^4.3.0",
    "classnames": "^2.3.2",
    "eslint": "^8.44.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-next": "13.4.8",
    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react": "^7.33.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-security": "^1.7.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-sonarjs": "^0.19.0",
    "next": "13.4.8",
    "normalize.css": "^8.0.1",
    "react": "18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.10.1",
    "react-redux": "^8.1.1",
    "redux-persist": "^6.0.0",
    "sharp": "^0.32.3",
    "swr": "^2.2.0",
    "typescript": "5.1.6"
  },
  "devDependencies": {
    "prettier": "^3.0.0"
  }

The problem is from eslint-config-next@13.4.8. Should I update the npm?

Answer 1

Explanation

If you create a new project with npm init -y and then npm install @typescript-eslint/eslint-plugin, you would see in your package-lock.json:

"node_modules/@typescript-eslint/eslint-plugin": {
  "version": "6.2.1",
  ...
  "peerDependencies": {
    "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
    ...
  }
  ...
}

This means @typescript-eslint/eslint-plugin version 6.2.1 needs @typescript-eslint/parser version ^6.0.0 to be in your project.

Meanwhile, here is what you have in your current package-lock.json:

"node_modules/eslint-config-next": {
  "version": "13.4.8",
  ...
  "dependencies": {
    ...
    "@typescript-eslint/parser": "^5.42.0",
    ...
  },
  ...
},

Meaning eslint-config-next needs version 5.42.0, so while installing @typescript-eslint/eslint-plugin, npm founds a versions conflict.

Solution

You can install @typescript-eslint/eslint-plugin version 5.9.0, which expects the version ^5.0.0 of @typescript-eslint/parser :

npm i @typescript-eslint/eslint-plugin@5.9.0