As explained in the Getting Started guide:

• parser: '@typescript-eslint/parser' tells ESLint to use the @typescript-eslint/parser package you installed to parse your source files.

  • This is required, or else ESLint will throw errors as it tries to parse TypeScript code as if it were regular JavaScript.

• plugins: ['@typescript-eslint'] tells ESLint to load the @typescript-eslint/eslint-plugin package as a plugin.

  • This allows you to use typescript-eslint's rules within your codebase.

In short: the eslint-plugin package contains the actual lint rules, and the parser plugin adds support for parsing TypeScript files (ESLint on its own does not support TypeScript — it used to, but that project evolved into typescript-eslint).

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/[email protected]

Solution was simply to upgrade to the latest version of eslint

Credit to Brad Zacher's answer for drawing my attention to How do I check to see what versions are installed?

If you have multiple versions of our tooling, it can cause various bugs for you. This is because ESLint may load a different version each run depending on how you run it - leading to inconsistent lint results.

Installing our tooling in the root of your project does not mean that only one version is installed. One or more of your dependencies may have its own dependency on our tooling, meaning npm/yarn will additionally install that version for use by that package. For example, react-scripts (part of create-react-app) has a dependency on our tooling.

You can check what versions are installed in your project using the following commands:

npm npm list @typescript-eslint/eslint-plugin @typescript-eslint/parser

Yarn yarn list --pattern "@typescript-eslint/eslint-plugin|@typescript-eslint/parser"

pnpm pnpm list @typescript-eslint/eslint-plugin @typescript-eslint/parser

If you see more than one version installed, then you will have to either use yarn resolutions to force a single version, or you will have to downgrade your root versions to match the dependency versions.

The best course of action in this case is to wait until your dependency releases a new version with support for our latest versions.

I used the yarn command, which gave the following output

yarn list v1.22.19
├─ @typescript-eslint/[email protected]
├─ @typescript-eslint/[email protected]
└─ [email protected]
   ├─ @typescript-eslint/[email protected]
   └─ @typescript-eslint/[email protected]

So the solution was to downgrade @typescript-eslint/eslint-plugin and @typescript-eslint/parser to version 5.62.0 in my package.json, to match the version used by eslint-config-react-app.

I then hit a different error:

There was a problem loading formatter: ...\node_modules\eslint\lib\cli-engine\formatters\stylish Error: require() of ES Module ...\node_modules\strip-ansi\index.js from ...\assertion-lib\node_modules\eslint\lib\cli-engine\formatters\stylish.js not supported. Instead change the require of index.js in ...\node_modules\eslint\lib\cli-engine\formatters\stylish.js to a dynamic import() which is available in all CommonJS modules.

Manually editing something in the node_modules folder didn't sound right, however it seems that this is a bug in yarn. So I deleted the yarn.lock file from my project and deleted the node_modules folder (which may have been overkill) and ran a npm install and now eslint is linting my typescript code successfully.