How to resolve "Definition for rule '@typescript-eslint/rule-name' was not found"

Question

I'm trying to add TypeScript compilation to an existing Javascript project.

AFAIK this is supposed to be possible (even easy), and you can incrementally spread TS through the codebase. Unfortunately this isn't what I'm seeing - after adding typescript and trying to start the project, I get this error for every single file in the project:

Definition for rule '@typescript-eslint/rule-name' was not found

There is no instance of the string rule-name anywhere in my source code.

This is my tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src",
    "noImplicitAny": false,
    "sourceMap": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "esModuleInterop": true,
    "jsx": "react",
    "skipLibCheck": true
  },
  "include": [
    "src",
    "types"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

I have tried adding "checkJs": false to the config and restarting but that doesn't change anything.

I haven't been able to track down anything online about this "rule-name" problem. It really looks like this is a placeholder text of some sort, but I can't find the source.

Can anybody suggest anything that might help me get this project to build?

Corpuscle

This is not an error from Typescript but from ESLint. I'm not sure of how you added Typescript, but if you included ESLint by accident, then it might need some setup if you already had something installed for JS. – Calli

Shared my solution here — https://mcmap.net/q/454519/-definition-for-rule-39-typescript-eslint-naming-convention-was-not-found-39 — check this out, might help – Cetology

Answer 1

If you're using react-app-rewired and customize-cra, you need to make sure you use disableEsLint from the latter; otherwise linting errors become typescript errors and prevent compilation.

Corpuscle

IMHO, that's the whole point of linting errors. Get rid of the lint, or change the configuration, rather than disabling it. – Simpleton

To compensate for disabling ESLint in that way when I'm stuck with react-app-rewired and customize-cra for a while, I edit the "start" script in package.json to "eslint --fix \"src/**/*.js\" && react-app-rewired start". So when I execute npm start, it runs eslint command first then, if it succeeds, start compiling the app. – Foretime

Answer 2

The error that you have is coming from ESLint and means that you have a rule in your .eslintrc which doesn't exist in any of your plugins. This could have happened if you followed the usage guide for @typescript-eslint/eslint-plugin but didn't replace the placeholder rule-name with an actual rule name as seen here https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

Colo

Answer 3

For me, it was enough to add plugin:@typescript-eslint/recommended in the .eslintrc file.

"extends": [
  ...<otherExtentions>...
  "plugin:@typescript-eslint/recommended"
]

Brigettebrigg

Answer 4

For those who do not want to just disable ESLint but make it work, running npm update could resolve the issue. In my case updating just @typescript-eslint/parser and @typescript-eslint/eslint-plugin was not enough but after npm update warnings dissapeared and ESLint was up and running.

Also worth to keep in mind this higlight from package authors:

It is important that you use the same version number for @typescript-eslint/parser and @typescript-eslint/eslint-plugin.

More detailed packages setup on npmjs.

Deist

Packages matching versions!?!?! THAT'S CRAZY TALK! – Thurstan

Answer 5

In my case, I'm upgrading from Angular 15 - 16 and in my eslintrc.json @typescript-eslint was not added inside plugins.

So, I have just added and it's working!

// eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": [
      "tsconfig.json",
      "e2e/tsconfig.json"
    ],
    "createDefaultProgram": true
  },
  "plugins": [
    "sonar",
    "rxjs",
    "jsdoc",
    "@typescript-eslint" // This was missing ;)
  ],
  "extends": [...],
  "rules": [...]
}

Dark

Answer 6

This is because the rule is not declared in your eslint.json file Add the following line to your RULES in esling.json file

"@typescript-eslint/object-curly-spacing" : "off"

Refer the image below to know more

Refer this image to add the rule to eslint.json file

Auspice

Answer 7

As of now the "@typescript-eslint/eslint-plugin" has removed this rule in their v6 release.

See here: https://github.com/typescript-eslint/typescript-eslint/issues/5973

You can fix this by replacing it with the rule "import/no-duplicates", which is part of the "eslint-plugin-import" package.

See here: https://github.com/import-js/eslint-plugin-import/blob/HEAD/docs/rules/no-duplicates.md

Blasien

Answer 8

My issue was that ... the rules were actually no longer valid and deprecated:

ESLint: Definition for rule '@typescript-eslint/no-empty-interface' was not found.(@typescript-eslint/no-empty-interface)
ESLint: Definition for rule '@typescript-eslint/no-use-before-define' was not found.(@typescript-eslint/no-use-before-define)
ESLint: Definition for rule '@typescript-eslint/quotes' was not found.(@typescript-eslint/quotes)
ESLint: Definition for rule '@typescript-eslint/semi' was not found.(@typescript-eslint/semi)

See if you can find your rule in this list, and if you do - just remove it from your .eslintrc.json file.

Paeon