The typescript-eslint-parser does not officially support this version of TypeScript

I recently acquired an outdated AngularJs application that still relies on the legacy tools: bower and grunt.

Upon executing grunt serve --reload, I encounter the following warning message:

WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-eslint-parser.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: ~2.3.2

YOUR TYPESCRIPT VERSION: 2.2.2

Please only submit bug reports when using the officially supported version.

It's strange because I have a recent version of Typescript installed:

tsc --version
Version 4.1.3

I assume that Typescript is installed locally. Is this possible?

How can I verify the versions of the installed tools (tsc and eslint)?

What is the process for upgrading? Is it worth it?

EDIT: Dependency list

> npm list
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e2ebebc4b5b2aab5b3aab5b6">[email protected]</a> /Users/llaporte/workspace/foo
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2f20293b222f3c632f2027232f3a2b0e7f607b6077">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9e91988a939e8dd2989a8b8b9a878bbfcdd1ced1cccd">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13727d74667f72613e7e726776617a727f53223d223d262b">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3f30392b323f2c732d3f30372a37243b1e6f706d7069">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5848b8290898497c8908cc8978a90918097a5d4cbd4cbd1d5">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53323d34263f322113627d657d6760">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9df8eeabb0eef5f4f0ddadb3aeacb3aea8">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d9d2c0dedaddd6f3819d8b9d85">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="610b101404131821534f514f5558">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb998a868f8aabdbc5d9dec5deda">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98c979d9c8b8a9a968b9cd78a8d8b90979eb9c9d7c9d7cac9">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51243f35342322323e233411607f697f66">[email protected]</a>
├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afdaddc6c5dcef9e819e9a819c99">[email protected]</a>
├── @typescript-eslint/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8feafce3e6e1fba2ffe3fae8e6e1cfbba1bebba1bd">[email protected]</a>
├── @typescript-eslint/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a3a2b38392f380a7e647b7e6478">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e0f5f2e9f3aae5e6f5c7b6a9b5a9b7">[email protected]</a> (git+http://xxx/xxx/grunt-bar.git#a6b7624aeea9ea324e92a9e8971feb67ab9d0346)
└── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24505d54415747564d545064100a150a17">[email protected]</a>

EDIT: grunt version

I am currently using an "older" version of grunt:

> grunt --version
grunt-cli v0.1.13
grunt v0.4.5
typescriptgruntjseslint

Answer №1

// Sample .eslintrc.json configuration

"parserOptions": {
    "warnOnUnsupportedTypeScriptVersion": false
},

Reference: Comment on Github issue

Answer №2

This issue may be considered old, but it continues to resurface due to outdated dependencies in project files.

'@typescript-eslint/******@***.***'

Even though CRA still installs this version, it does not necessarily mean that CRA or any other builders (such as webpack or grunt) should be downgraded to accommodate this dependency.

As suggested and proven effective for me, instead of waiting for the library to be removed/upgraded from the builder, you can add the following line to your package.json:

"resolutions": {
  "@typescript-eslint/typescript-estree": "5.9.0"
}

This essentially instructs the compiler to utilize version 5.9.0 of typescript-estree, effectively "upgrading" the underlying library.

Answer №4

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

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

Instructions on invoking a function when a button is clicked

I am attempting to trigger a dataUpdate function upon clicking the edit() button I am striving to modify the record Current Version: Angular CLI: 10.0.6 Angular: 10.0.10 registration.component.html <div> <button type="button&quo ...

angulartypescriptangular-cliag-grid

Why does my script seem to be missing from this GET request?

Encountering an issue while setting up a page using npm and grunt. Request URL:http://localhost:9997/bower_components/requirejs/require.js Request Method:GET Status Code:404 Not Found The problematic html code is as follows: <script> ...

javascriptnpmgruntjs

Should I opt for ionic2 for my production needs?

Currently, I am using Ionic 1 and AngularJS 1 for our applications. We are considering transitioning to Ionic 2 for our new applications. Is this the right decision? I have a few questions: AngularJS 1 and Angular 2 are different, but how does Ionic ...

angularjstypescriptangularionic-frameworkionic2

Angular 6 - Ensuring all child components are instances of the same component

My issue has been simplified: <div *ngIf="layout1" class="layout1"> <div class="sidebar-layout1"> some items </div> <child-component [something]="sth"></child-component> </div> <div *ngIf="!layout1" class= ...

angulartypescriptcomponentsangular-clidirective

How can we verify if a React component successfully renders another custom component that we've created?

Consider this scenario: File ComponentA.tsx: const ComponentA = () => { return ( <> <ComponentB/> </> ) } In ComponentA.test.tsx: describe("ComponentA", () => { it("Verifies Compo ...

reactjstypescriptunit-testingjestjstdd

How can a component access its own template specified in the @Component decorator?

@Component({ selector: 'base-comp', template: '<div>hello</div>' <-- how to get this }) export class BaseComponent { someMethod( ) { <-- referenced here } Is there a way to access the entire template i ...

angulartypescriptdesign-patterns

Dynamically incorporate new methods into a class

Currently, I am in the process of implementing setters and getters for items that will be stored in session storage. These methods are being written within a service. However, upon attempting to call these functions in my component, I am encountering a tra ...

angulartypescriptangular5

Utilizing TypeScript's Type Inference to Simplify Function Combinations

I'm facing a challenge with what should be simple. The types aren't coming through as expected when trying to combine a couple of functions. Is there a way to have TypeScript infer the types without explicitly specifying them? import { pipe, map ...

typescriptfunctional-programmingtypescript-typingsramda.js

What is the best way to merge an array of objects into a single object?

Is there a way to dynamically convert object1 into object2, considering that the keys like 'apple' and 'water' inside the objects are not static? const object1 = { apple:[ {a:''}, {b:'&apos ...

javascriptreactjstypescriptnext.js

Concerning the utilization of the <mat-toolbar> element within Angular

Is the mat-toolbar in Angular going to persist across all components and pages of the application? Will it be present in every component throughout the application? <mat-toolbar color="primary"> <mat-toolbar-row> <span>Welcome to C ...

angulartypescriptangular-material

Tips for uploading the IDENTICAL file in angular4

After successfully uploading a file, I encountered an issue where the system does not allow me to upload the same file twice. Here is the code snippet related to the problem: <input type="file" (change)="onFileChange($event)" name="fileUploaded" value ...

angulartypescriptfile-upload

Delete a specific element from an array using a specified criteria

I'm attempting to remove a specific item from an array based on the selected option. To better understand, take a look at this code: component.html <fnd-extended-select label="Tipo Prodotto:" [(ngModel)]="landingType" name="tipoprodotto"> ...

arraysangulartypescriptsplice

What is the correct version compatibility matrix for Expo, NPM, Node, React Native, and TypeScript?

Currently, I am in the process of setting up React Native with TypeScript. Here are the steps I followed: npx react-native init MyApp --template react-native-template-typescript I made sure to install TypeScript as well: npm install -g typescript ' ...

node.jstypescriptreact-nativenpmnpx

ngOnInit unable to properly listen to event stream

I've been trying to solve a persistent issue without success. The problem involves the interaction between three key elements: the HeaderComponent, TabChangingService, and TabsComponent. Within the HeaderComponent, there are three buttons, each with a ...

angulartypescriptangular6angular-router

Ways to create a method that can be overridden

Is there a way to declare a virtual method in TypeScript? I'm attempting to achieve something similar to the following: export abstract class SuperClass { public virtual enable(enableComponents: boolean): void { } } ...

angulartypescript

NextJS is facing a dilemma as it struggles to understand why a simple prop passing to display a p tag is not rendering anything. Could the issue lie in data fetching and display

Working in NextJS, I set up an api endpoint, debugged client state issues, and ensured my state variables were correct. However, I am still unable to render the expected output. I am attempting to display a JSON object like this: [{"id":"cl ...

reactjstypescriptnext.js

Transitioning from Global Namespace in JavaScript to TypeScript: A seamless migration journey

I currently have a collection of files like: library0.js library1.js ... libraryn.js Each file contributes to the creation of a global object known as "MY_GLOBAL" similarly to this example: library0.js // Ensure the MY_GLOBAL namespace is available if ...

javascripttypescript

Change the background color of a span element dynamically

I am currently working on implementing dynamic background coloring for a span tag in my Angular view that displays document types. The code snippet provided is as follows: <mat-card *ngFor="let record of records"> <span class="doc ...

angulartypescriptsass

Error: The identifier HTMLVideoElement has not been declared

Encountering an issue while attempting to build my Angular 9 Universal project for SSR: /Users/my-project/dist/server.js:28676 Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", HTMLVideoElement) ReferenceError: HTMLVideoElem ...

angulartypescriptangular-universalreferenceerror

Manipulate and send back information from Observable in Angular

Here is an example of a scenario where I have created a service to retrieve a list of properties. Within this service, I am utilizing the map function to manipulate the response and then returning the final array as an Observable. My question is: How can ...

angulartypescriptrxjs