ESLint is throwing an error about the undefined `HeadersInit` variable, even though TypeScript recognizes it as a valid definition

Utilizing the HeadersInit type in my react/typescript project has posed a challenge. ESLint seems to believe that the type is undefined:

https://i.sstatic.net/LPcRf.png

However, it is evident that TypeScript recognizes what HeadersInit entails. Upon further inspection, the type definition can be traced back to the standard typescript library.

https://i.sstatic.net/QpmGJ.png

Why does ESLint raise concerns when TypeScript has a clear understanding?

Here's a snippet of my eslintrc configuration:

{
  "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
      }
    }
  ]
}

Here are the package versions I am using:

    "@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"
typescripteslinttypescript-eslint

Answer №1

The problem arises from the fact that the core ESLint no-undef rule is being applied to your code, but ESLint rules are not fully equipped to handle TypeScript syntax and types. To effectively lint TypeScript code, it is recommended to also extend your configuration with one of the recommended typescript-eslint shareable configs.

One solution could be adding 

"plugin:@typescript-eslint/recommended"
to the extends list to resolve this issue.

Refer to for comprehensive information and a beginner's guide on linting TypeScript code. If you are still using the legacy ESLint config format, visit for more relevant resources.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to refresh an array in Angular 4 after inserting a new element using splice method?

I have a Angular list displayed in a table, and I need to insert an element at a specific position. I have tried using the following code: array.splice(index, 0, element); While everything seems fine in the console with the element being added at the corr ...

javascripthtmlangulartypescript

In what way does TypeScript assign an object's type based on its current value?

let object = { key1: 123, key2: 'abc' } If we analyze, the data type of object is: { key1: number, key2: string } However, there are times when I wish its datatype could be defined as: { key1: 123, key2: 'abc' } Moreover, consideri ...

typescript

Troubleshooting problem with rxjs subscription impacting component UI refresh

Currently, I am diving deep into the world of rxjs Observables, Observers, and Subscriptions. In order to grasp their functionality better, I decided to experiment with a sample code that updates the UI with random numbers at intervals of 1 second. My ulti ...

angulartypescriptrxjsobservablesubscription

Combining Typescript interfaces to enhance the specificity of a property within an external library's interface

I have encountered a scenario where I am utilizing a function from an external library. This function returns an object with a property typed as number. However, based on my data analysis, I know that this property actually represents an union of 1 | 2. Ho ...

reactjstypescript

Angular 6: Issues with API Get Method not executing when an integer value is passed with an empty string

I'm experiencing an issue in my angular application when trying to call an API method from angular. The method requires two parameters - one integer value and one string value, which is optional. Below is the code snippet in Typescript: let id:numbe ...

c#angulartypescriptasp.net-coreasp.net-core-webapi

Generating Typescript definition files from JavaScript files with module.exports assignment

I'm currently working on creating a custom TypeScript definition file for format-duration: module.exports = (ms) => { let { days, hours, minutes, seconds } = parseMs(ms) seconds = addZero(seconds) if (days) return `${days}:${addZero(hours)}: ...

typescriptdefinitelytyped

Error messages encountered following the latest update to the subsequent project

Recently, I upgraded a Next project from version 12 to 14, and now I'm encountering numerous import errors when attempting to run the project locally. There are too many errors to list completely, but here are a few examples: Import trace for requeste ...

javascriptreactjsnode.jstypescriptnext.js

Can you explain the functionality of templates in the Primeng grid for Angular 6?

In my project, I am incorporating the use of primeng TurboTable which utilizes a pTemplate directive for templates. I am attempting to replicate this approach in order to create a reusable (DUMB) component. Despite my efforts to find a solution, I have not ...

javascriptangulartypescriptprimeng-datatableng-template

When trying to reference a vanilla JavaScript file in TypeScript, encountering the issue of the file not being recognized

I have been attempting to import a file into TypeScript that resembles a typical js file intended for use in a script tag. Despite my efforts, I have not found success with various methods. // global.d.ts declare module 'myfile.js' Within the re ...

javascriptreactjstypescriptreact-typescript

Updates to Angular form control values are not triggering notifications

I am currently working with a basic form control that subscribes to the valueChanges observable. @Component({ selector: 'my-app', template: ` <input [formControl]="control" /> <div>{{ name$ | async | json }}</div ...

angulartypescriptrxjs

Best practice for importing ts files from an npm package

When faced with the need to divide a ts project into multiple repositories/packages for creating microservices, the challenge arises in combining these packages efficiently. Some packages are required in one microservice, others in another, and some in all ...

node.jstypescriptnpmimportmicroservices

Ways to incorporate additional parameters into an object

Is there a way to incorporate new parameters into objects during a foreach loop in JavaScript? const data = [big data]; data.forEach(async e => { Object.assign(e, {newData: 'string'}; console.log(e); //new parameter added }) console.lo ...

javascripttypescript

Ways to utilize the scan operator for tallying emitted values from a null observable

I'm looking for an observable that will emit a count of how many times void values are emitted. const subject = new Subject<void>(); subject.pipe( scan((acc, curr) => acc + 1, 0) ).subscribe(count => console.log(count)); subject ...

angulartypescriptrxjsobservable

Transform type definitions declared using CommonJS to type definitions that do not rely on a module system

Currently in the process of transitioning from VS 2013 with TS 1.8 to VS 2017 with TS 2.5. As part of this update, it appears that I need to upgrade typings for react and other dependencies. Unfortunately, the new typings are utilizing commonjs : https: ...

typescripttypescript-typingsdefinitelytyped

Display a popup in Angular 4 when a click event is triggered by a separate

I am currently facing an issue that I can't seem to solve. My objective is to display a popup div on the page when clicking on a menu entry in my navbar.component. In order to achieve this, I introduced a property called "show" in my popup component ...

javascriptangulartypescript

Certain files in the HTML report generated by ESLint may not display any output

When using eslint to generate an HTML report, I am encountering some issues. Within my package.json, the configuration is as follows: "eslint-html": "eslint --format html ./src/* -o ./dist/eslint/index.html", The resulting report in the file ./dist/esli ...

vue.jseslint

Choose an alternative following the start-up phase

I have been searching for solutions on various platforms, including Stack Overflow, but nothing seems to work for me. I am struggling with selecting the first option after initializing the box because currently it is choosing a blank option that is not eve ...

angulartypescriptangular5

What is the best way to create a TypeScript interface or type definition for my constant variable?

I'm facing challenges in defining an interface or type for my dataset, and encountering some errors. Here is the incorrect interfaces and code that I'm using: interface IVehicle { [key: number]: { model: string, year: number }; } interface IV ...

javascripttypescripttypesinterface

Webpack 5 is failing to bundle re-exports correctly

Whilst bundling my web application, I've come across an issue with re-exports of certain modules not behaving as expected. Despite trying various optimization settings, I have been unsuccessful in resolving this issue. Setup Here's the setup tha ...

reactjstypescriptbundlewebpack-5

`Property cannot be redefined: __internal__deprecationWarning` detected in a Shopify Hydrogen development project

Recently, while working on my Shopify Hydrogen project using Remix and Typescript, I encountered a sudden error when running npm run dev. Everything was functioning perfectly just 5 hours ago, but after returning from dinner, the app refuses to launch. ╭ ...

reactjstypescriptshopify-hydrogen