I actually had this problem the other day; you need to go to your .eslintrc and make sure that the module is there under the parser property of the config. Should look something like this in the end:

{
  //...

  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],

  //...
}

This should cover the essentials regarding dependencies in your linter. Hope it helps.

Edit

I checked GitHub for this issue, might not be the same as the one I had, check this link please.

Different lint rules for JavaScript and TypeScript files

The problem happens for one of the reasons below:

1. You're using a rule which require type information and didn't specify a parserOptions.project;
2. You specified parserOptions.project, didn't specify createDefaultProgram (it will be removed in a future version), and you're linting files not included in the project (e.g. babel.config.js, metro.config.js)

ESLint flat config (version >= 9)

You can use TypeScript rules only on ts files with the following config (also, see the docs):

const tsPlugin = require('@typescript-eslint/eslint-plugin');
const tsEslint = require('typescript-eslint');

/**
 * @type {import('eslint').Linter.FlatConfig[]}
 */
module.exports = [
  // This is just an example for rules specific to JS files
  {
    files: ['**/*.js'],

    rules: {
      'no-duplicate-imports': 'error',
    },
  },

  ...tsEslint.configs.recommendedTypeChecked.map((config) => ({
    ...config,
    files: ['**/*.ts'], // We use TS config only for TS files
  })),

  {
    files: ['**/*.ts'],

    // This is required, see the docs
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: __dirname, // or import.meta.dirname for ESM
      },
    },

    // This is needed in order to specify the desired behavior for its rules
    plugins: {
      '@typescript-eslint': tsPlugin,
    },

    // After defining the plugin, you can use the rules like this
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',
    }
  }
]

ESLint legacy config (version <= 8)

To solve it, update your ESLint config to use TypeScript rules only on TypeScript files:

{
  // ...
  parser: '@typescript-eslint/parser',
  plugins: ["@typescript-eslint"],
  overrides: [
    {
      files: ['*.ts', '*.tsx'], // Your TypeScript files extension

      // As mentioned in the comments, you should extend TypeScript plugins here,
      // instead of extending them outside the `overrides`.
      // If you don't want to extend any rules, you don't need an `extends` attribute.
      extends: [
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking',
      ],

      parserOptions: {
        project: ['./tsconfig.json'], // Specify it only for TypeScript files
        // or `project: true` in typescript-eslint version >= 5.52.0
      },
    },
  ],
  // ...
}

You can set project: true since typescript-eslint 5.52.0.

You can read more about the overrides config on the official ESLint docs: How do overrides work?

Don't lint a specific file

If you don't want to lint the file that is mentioned in the error (e.g. babel.config.js), you can ignore it adding its name to the .eslintignore file:

babel.config.js

Anyway, the step above (about overriding the config for TypeScript files) is important in case your project contains both JavaScript and TypeScript files that you want to lint.

You can also create other overrides for different situations, e.g. a different config for test files, since it can use developer dependencies and run on node environment, instead of browser, or in version >= 9 you can use globals.

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]

after checking at eslint plugin naming convention, found out that I have to install the missing @typescript-eslint as following syntax

npm install --save-dev @typescript-eslint/eslint-plugin

this solved the issue but new error coming that react version is not specified , so added that in "settings" key.

eslintrc.js

// eslint-disable-next-line no-undef
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
  },
  settings: {
    react: {
      version: 'latest',
    },
  },
};

package.json

"devDependencies": {
    "@types/classnames": "^2.3.1",
    "@types/react-redux": "^7.1.19",
    "@types/react-router-dom": "^5.3.1",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.2",
    "redux-devtools": "^3.7.0",
    "redux-devtools-extension": "^2.13.9",
    "typescript": "^4.4.4"
  }

tsconnfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "noImplicitAny": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}