Search code examples
typescripteslinttypescript-eslint

ESLint complains that 'HeadersInit' is not defined, when according to TypeScript, it clearly is

I'm trying to use the HeadersInit type in my react/typescript project. My problem is that ESLint thinks the type is undefined:

enter image description here

But as you see, typescript clearly knows what HeadersInit is. When I click into it, the typedef comes from the standard typescript library

enter image description here

Why is ESLint complaining about this, when TypeScript clearly knows what it is?

My eslintrc:

{
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "prettier",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "prettier", "@typescript-eslint"],
  "overrides": [
    {
      "files": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.tsx"],
      "env": {
        "jest": true
      }
    }
  ],
}

Package versions:

    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "eslint": "^8.38.0",
    "eslint-config-next": "^13.3.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-jest-dom": "^4.0.3",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-testing-library": "^5.10.3",
    "typescript": "5.0.4"
Solution

  • The issue is that the core ESLint no-undef rule is running on your code, but core ESLint rules don't generally know about TypeScript syntax or types. In order to lint TypeScript code you should have your config also extend from one of the recommended typescript-eslint shareable configs.

    For example, adding "plugin:@typescript-eslint/recommended" to the extends list should fix the issue.

    See https://typescript-eslint.io/getting-started for more information and a general guide to getting started linting TypeScript code. Since you're still on the legacy ESLint config format, https://typescript-eslint.io/getting-started/legacy-eslint-setup is most applicable to what you're looking for.