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

NuxtJs login feature is functional, but encounters an unauthorized 401 error

I am utilizing the NuxtJs auth module to manage my authorization within the application state. I have created an express API specifically for this purpose, and it functions correctly. Below is the configuration included in my nuxt.config.js file: axios ...

javascriptexpressnuxt.js

Accessing clipboard contents upon button click using TypeScript

Seeking assistance with retrieving data from the clipboard in TypeScript after clicking on a button. Please provide guidance. Thank you! ...

javascriptangularjstypescript

Encountering compilation errors with Angular project following installation of a package

I recently installed the LocalStorage Package and encountered the following message: npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfem ...

angularnpm

Using the pipe operator in RXJS to transform an Event into a KeyboardEvent

I'm encountering an error when trying to add a keydown event and convert the parameter type from Event to KeyboardEvent as shown below. fromEvent(document, "keydown") .pipe<KeyboardEvent, KeyboardEvent>( filter((event) => even ...

angulartypescriptrxjs

Error: The property 'children' is not found in type '{ children?: ReactNode; }'

I have been working on implementing the search bar feature from the provided link. Despite my efforts to match the types correctly, I keep encountering a TypeScript error. Homepage.tsx const [searchQuery, setSearchQuery] = useState(query || '' ...

javascriptreactjstypescriptsearchuse-state

Unlock the key to connecting the output of one observable to another in rxjs

I have a procedure for saving users in the database. These are the steps I take: 1) First, I validate the request. 2) Next, I hash the password. 3) Finally, I store the user details in the users collection along with the hashed password. Below is the ...

typescriptrxjs

When using `npm list`, the `create-react-app` package does not appear in the list of installed packages

I have a question that might be simple, but I couldn't find the answer anywhere. I've installed create-react-app using npm, but when I check with npm list it doesn't show up. What command can I use to see everything I've installed using ...

reactjsnpmcreate-react-app

How can TypeScript be used to enable CSV or PDF export in a material-react-table?

Is it possible to incorporate the ability to export data to CSV or PDF in a material-react-table? While I am familiar with how to do this with a Material UI table, I have not been able to find the same functionality for the material-react-table. Thank you ...

reactjstypescriptexport-to-csvmaterial-react-table

Mixing Jest and Cypress in a TypeScript environment can lead to Assertion and JestMatchers issues

When utilizing [email protected] alongside Jest, we are encountering TypeScript errors related to Assertion and JestMatchers. What is the reason for these TypeScript errors when using Jest and [email protected] in the same project? ...

reactjstypescriptjestjsnext.jscypress

Setting up mongoose on a Debian system

While attempting to install mongoose, I encountered the following error message: npm http GET https://registry.npmjs.org/mongoose npm http 200 https://registry.npmjs.org/mongoose npm http GET https://registry.npmjs.org/mongoose/-/mongoose-3.6.0rc0.tgz npm ...

node.jsmongoosenpm

Generate md-card components in real-time using data fetched from an API

I have a scenario where I make an API call to fetch user profiles, and I want to generate Angular Material Design md-cards dynamically for each profile. The number of profiles retrieved can vary, hence the need for dynamic card creation. Below is the comp ...

angulartypescriptangular-material

The implementation of Typescript in Express does not rely on Middleware

I've encountered an issue with my Auth Middleware - it seems that the middleware isn't being called at all. Even when I intentionally throw an Error within the middleware function, nothing is printed out. For testing purposes, I only need to inv ...

javascripttypescriptexpressmiddleware

Having trouble with the lodash find function in my Angular application

npm install lodash npm install @types/lodash ng serve import { find, upperCase } from 'lodash'; console.log(upperCase('test')); // 'TEST' console.log(find(items, ['id', id])) // TypeError: "Object(...)(...) is un ...

javascriptangulartypescriptlodash

Creating Dynamic Ionic Slides with Additional Slides Inserted Before and After

Hello, I am currently using ngFor to generate a set of 3 slides with the intention of starting in the middle so that I can smoothly slide left or right from the beginning. When I slide to the right, I can easily detect when the end is reached and add anot ...

angulartypescriptionic-frameworkionic2ionic3

There was an error with the npm network while trying to request the https://registry.npmjs.org/@svgr%2fcore, resulting in a

Encountering issues during npm installation [root@mbiazdevops UAT]# npm install --registry=https://registry.npmjs.org npm ERR! code ECONNRESET npm ERR! errno ECONNRESET npm ERR! network request to https://registry.npmjs.org/@svgr%2fcore failed, reason: The ...

npmnode-modulesnpm-installpackage.jsoneconnreset

The error message "Property 'data1' is not a valid property on the object type {}"

const Page: NextPage = ({data1}:{data1:any}) => { const [open, setOpen] = React.useState(false); const [data, setData] = React.useState(data1); const handleAddClick = () => { setOpen(true); }; ..... } export async function getServerS ...

reactjstypescriptnext.js

Having trouble with installing the npm package "testmybot"

I am attempting to utilize this sample to showcase the testing of a chatbot using the node "testmybot" package. However, when I run the "npm install" command, I encounter an error. Please refer to the attached screenshot for details. Steps I have taken ...

node.jsnpmnpm-install

What is the best way to push NPM module names to a git repository without including the actual files, allowing them to be rebuilt on the receiving end?

I'm currently working on a node project that relies on multiple npm modules. Instead of committing all these modules to my git repository, pulling them onto my server, and rebuilding them due to different system architectures, I want to only commit th ...

node.jsgitnpm

Mastering Angular Service Calls in TypeScript: A Comprehensive Guide

In the midst of my TypeScript angular project, I am aiming to revamp it by incorporating services. However, I have encountered an issue where when calling a function within the service, the runtime does not recognize it as the service class but rather the ...

angularjstypescriptthisangular-services

When organizing data, the key value pair automatically sorts information according to the specified key

I have created a key value pair in Angular. The key represents the questionId and the value is the baseQuestion. The baseQuestion value may be null. One issue I am facing is that after insertion, the key value pairs are automatically sorted in ascending ...

javascriptangulartypescript