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

user_1136527 0
Viewed 17102

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

enter image description here

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?

typescript build javascript
4 Answers

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

user_74921900

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.

user_142459810

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

user_136545810

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.

user_11365270
Related