Encountering issues with @typescript-eslint/typescript-estree due to using a non-officially supported version of TypeScript after updating Nuxt

After upgrading Nuxt in my project using the command npx nuxi upgrade, I encountered an issue while running eslint .. The output displayed a warning regarding the TypeScript version:

=============

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

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

SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.4.0

YOUR TYPESCRIPT VERSION: 5.4.3

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

=============

Upon investigating further, I discovered that an older version of Nuxt uses 

"@nuxt/eslint-config": "^0.2.0"
for ESLint configuration. You can view its configuration details here. This configuration relies on 
@typescript-eslint/eslint-plugin, @typescript-eslint/parser
. Upon checking the package-lock.json file, I found the following information about the "@nuxt/eslint-config" package:

package-lock.json

"node_modules/@nuxt/eslint-config": {
         "version": "0.2.0",
         "resolved": "https://registry.npmjs.org/@nuxt/eslint-config/-/eslint-config-0.2.0.tgz",
         "integrity": "sha512-NeJX8TLcnNAjQFiDs3XhP+9CHKK8jaKsP7eUyCSrQdgY7nqWe7VJx64lwzx5FTT4cW3RHMEyH+Y0qzLGYYoa/A==",
         "dev": true,
         "dependencies": {
            "@rushstack/eslint-patch": "^1.3.3",
            "@typescript-eslint/eslint-plugin": "^6.5.0",
            "@typescript-eslint/parser": "^6.5.0",
            "eslint-plugin-vue": "^9.17.0",
            "typescript": "^5.2.2"
         },
         "peerDependencies": {
            "eslint": "^8.48.0"
         }
      },

The versions specified in the package are 6.5.0 for @typescript-eslint/eslint-plugin and @typescript-eslint/parser. However, I noticed that the latest version is 7.5.0. It appears that although Nuxt updated TypeScript during the upgrade process, the @nuxt/eslint-config package was not updated to reflect this change. It seems there is no newer version available at the moment :)

typescriptnpmnuxt.jseslint

Answer №1

To solve the issue effectively, utilize the command 

npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser --legacy-peer-deps

--legacy-peer-deps allows your packages to be installed above existing dependencies, preventing conflicts.

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

Is it feasible to alter the TypeScript interface for the default JavaScript object (JSON)?

When dealing with cyclic objects, JSON.stringify() can break (as mentioned in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value) An alternative solution suggested in the same article is to use 'cycle.js&apos ...

javascriptjsontypescripttypesinterface

Passing Selected Table Row Model Data to Backend in Angular 7

My goal is to send the selected data in a table row, which I select through a checkbox, to the server. However, I'm unsure about how to handle this via a service call. While I have the basic structure in place, I need assistance with sending the items ...

javascriptangulartypescriptobservableangular7

For some unknown cause, I am unable to initiate the create-react-app

It seems that create-react-app is not initializing even after following all the steps mentioned in the official React documentation to get started. npx create-react-app my-app Upon running this command, I received the message: ** You are running create-re ...

reactjsnpmcreate-react-appnpx

Encountering "Undefined error" while using @ViewChildren in Angular Typescript

In my application, I am facing an issue with a mat-table that displays data related to Groups. The table fetches more than 50 rows of group information from a data source, but initially only loads the first 14 rows until the user starts scrolling down. Alo ...

angulartypescriptundefinedviewchildren

Leveraging TypeScript to call controller functions from a directive in AngularJS using the "controller as"

I've encountered an issue while trying to call a controller function from a directive, specifically dealing with the "this" context problem. The logService becomes inaccessible when the function is triggered by the directive. Below is the code for th ...

angularjstypescriptangularjs-directive

Explain the TypeScript type where the keys of an object not found in an array should correspond to the type of another object

Currently, I am developing a utility function called copyKnownProperties that is responsible for copying properties from one class or object to another only if the key exists on both objects. In the example provided, you can observe an attempt to copy prop ...

typescripttypescript-generics

The npm http package exclusively includes a package.json without any accompanying JavaScript files

After installing an npm package that listed 'http' as a dependency, I also installed 'http'. However, all npm downloaded for 'http' was a package.json file that referenced a non-existent index.js file. Could it be that the ind ...

javascripthttpnpm

The sticky navbar fails to stay in place when the content becomes too lengthy

This is my current state of code (minified, for explanation only) index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w ...

htmlcssreactjstypescriptnext.js

The altered closure variable ts remains undetectable

Check out the live demonstration I made changes to the flag variable, but TypeScript did not recognize it. Could this be a coding issue? function fn () { let flag = true function f () { // alter the value of flag flag = false } for (let ...

typescript

Develop a versatile factory using Typescript

For my current project, I am developing a small model system. I want to allow users of the library to define their own model for the API. When querying the server, the API should return instances of the user's model. // Library Code interface Instanc ...

typescripttypescript1.6typescript1.7

Executing the Docusaurus command to publish to Github Pages

Seeking assistance for a Windows user! I've tried various tutorials, but none have resolved my issue. Whenever I attempt to use the publish command in Git Bash, I encounter the following error: I am running Windows 10 and have tried both Github Desk ...

gitnpmdocusaurus

Converting a specific string format to a Date object in TypeScript

I am in need of a solution to convert strings with the given format into Date objects using TypeScript: var dateTimeString:string = "20231002-123343" I have created my own method as shown below: var dateTime:string[] = dateTimeString.split(" ...

typescript

What is the method for defining functions that accept two different object types in Typescript?

After encountering the same issue multiple times, I've decided it's time to address it: How can functions that accept two different object types be defined in Typescript? I've referred to https://www.typescriptlang.org/docs/handbook/unions ...

javascripttypescript

The package 'bluebird' cannot be found in the npm registry

I encountered an issue while trying to integrate RethinkDB into my project. I reinstalled Node.js. I added the path to my environment variables. I removed my proxy settings. I changed the registry. Despite taking these steps, I am still facing the error ...

node.jsnpmbluebirdrethinkdb

Unleash the power of a module by exposing it to the global Window object using the dynamic

In my development process, I am utilizing webpack to bundle and manage my TypeScript modules. However, I am facing a challenge where I need certain modules or chunks to be accessible externally. Can anyone guide me on how to achieve this? Additional conte ...

javascripttypescriptgulpwebpack

Encountering difficulties in installing firebase-tools via npm on MAC OSX 10.12.6 due to an error message stating "Unexpected end of JSON input while parsing near '...x","firebase":"~1.0.1)"

Currently, I am using node version 10.10.0 and npm version 6.4.1. I am attempting to install firebase CLI for a firebase project that has already been created in order to work on cloud functions. Strangely, the installation is successful on other systems ...

node.jsfirebasenpmfirebase-toolsfirebase-cli

Disable the default animation

Is there a way to disable the default animation of the Select label in my code snippet below? export default function TicketProfile(props: any) { return ( <Container> <FormControl sx={{ ml: 1, mr: 1, minWidth: 220 }}> <Inp ...

reactjstypescriptmaterial-ui

Utilizing Angular 4 Typescript to create cascading drop-downs within a table

As a newcomer to Angular, I am in the process of building my first application using Angular 4 and TypeScript. I would like to implement Cascading dropdowns within a table using Angular 4. Currently, I am facing an issue where changing the dropdown selec ...

angularjstypescript

Logging into Twitch API using asynchronous functions and VueJS

Hey there, I'm currently utilizing Nuxt to develop an application that integrates with Twitch. One of my main goals is to allow users to easily sign in using their Twitch credentials. I have already set up the necessary components within Twitch and o ...

vue.jstwitchnuxt.js

Encountering a warning during the installation of Angular CLI

As a newcomer to this platform, I recently installed Node.js. However, when attempting to execute the command npm install -g @angular/cli, an error was encountered: **npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported ...

node.jsangularnpmerror-handlingangular-cli