Why does the error message "DeprecationWarning: 'originalKeywordKind' deprecated" keep popping up while I'm trying to compile my project?

Upon completing the compilation of my project, I encountered the error message provided below. What does this signify and what steps can I take to resolve it?

- info Linting and checking validity of types
DeprecationWarning: 'originalKeywordKind' has been deprecated since v5.0.0 and will no longer be usable after v5.2.0. Use 'identifierToKeywordKind(identifier)' instead.

https://i.stack.imgur.com/dGwXm.png

The current version of nextjs I am using is 13.4 and here are the dependencies listed:

"dependencies": {
    "@prisma/client": "^5.0.0",
    "@types/bcryptjs": "^2.4.2",
    "@types/node": "^20.4.5",
    "@types/react": "^18.2.16",
    "@types/react-dom": "^18.2.7",
    "axios": "^1.4.0",
    "bcryptjs": "^2.4.3",
    "eslint": "^8.45.0",
    "eslint-config-next": "^13.4.12",
    "next": "^13.4.12",
    "next-auth": "^4.22.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.45.2",
    "react-uuid": "^2.0.0",
    "typescript": "^5.1.6"
},
"devDependencies": {
    "@vercel/analytics": "^1.0.1",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.27",
    "prettier-plugin-tailwindcss": "^0.4.1",
    "prisma": "^5.0.0",
    "tailwindcss": "^3.3.3"
}
node.jsreactjstypescriptnext.js

Answer №1

To resolve the issue, simply update @typescript-eslint/parser to the latest version ( ^6.6.0). This package has an indirect dependency on tsutils.

Additionally, make sure these dependencies are placed in the devDependencies section:

"@types/bcryptjs": "^2.4.2",
"@types/node": "^20.4.5",
"@types/react": "^18.2.16",
"@types/react-dom": "^18.2.7",
"eslint": "^8.45.0",
"eslint-config-next": "^13.4.12",
"typescript": "^5.1.6"

Answer №3

While working on a NestJS application, I recently upgraded the underlying TypeScript installation to leverage new TS features like satisfies.

In addition to Munchy's explanation of why this issue occurs, the solution involves updating all linting-related packages using 

npm i -D <package-name>@latest
, such as:

eslint
eslint-config-prettier
eslint-plugin-prettier
prettier
@typescript-eslint/eslint-plugin
@typescript-eslint/parser

By updating these packages, we were able to eliminate the warnings and maintain best practices by ensuring that our dev dependencies are up-to-date.

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

Challenges with Tab navigation in React and Ionic 5

I am facing a challenge with getting the tabs navigation to function correctly. Here is my current code: App.tsx: const App: React.FC = () => <IonApp> <IonReactRouter> <IonRouterOutlet id="main"> < ...

javascriptreactjsionic-frameworkionic5

I have implemented a Node.js promise to check if a username exists in the database or not

Can anyone guide me on how to check if a username exists in MongoDB using promises? I'm new to Node.js and would appreciate help in understanding the process. Thanks in advance. var errorsArr = []; var promise = checkUsername(); promise.then(function ...

node.jsmongodbmongoosesynchronous

What's the best way to transform createHmac function from Node.js to C#?

Here's a snippet of code in Node.js: const crypto = require('crypto') const token = crypto.createHmac('sha1', 'value'+'secretValue').update('value').digest('hex'); I am trying to convert t ...

javascriptc#.netnode.js

Caution: A duplicate key was found in ReactJS when attempting to flatten children

Currently, I am utilizing Tabs from Material UI to showcase a List component that is filtered by the tab. Take a look at the code snippet below from my Container Component: <Tabs className="DrawerTabs" ...

javascriptreactjsmaterial-ui

After updating to ionic-native 2.5.1, encountering TypeScript Error TS1005 in Ionic 2

After updating to the latest version of ionic-native (2.5.1) in my ionic 2 project, I am encountering Typescript errors when running "ionic serve" in my terminal. I have attempted to update the typescript version to 2.x but to no avail. Any assistance woul ...

typescriptionic2ionic-native

Issue: The JSX element 'X' is missing any constructors or call signatures

While working on rendering data using a context provider, I encountered an error message stating "JSX Element type Context does not have any constructor or call signatures." This is the code in my App.tsx file import { Context } from './interfaces/c ...

reactjstypescriptreact-typescripttsx

Troubles arise when trying to encapsulate a ReactJS embedded application with Material ui, causing issues with the

Currently, I am integrating a ReactJS application using Material UI styled components within a Wordpress page. To achieve this, I am utilizing webpack for transpilation of the JavaScript. After generating the bundle for the embedded version of the applica ...

cssreactjswordpressmaterial-uiembed

This code snippet, document.location.search.replace('?redirect=', '').replace('%2F', ''), is failing to execute properly in Firefox

The functionality of document location search replace redirect to another page works in Chrome, however, document.location.search.replace('?redirect=', '').replace('%2F', ''); it does not work in Firefox; instead, ...

javascriptangularreactjs

The issue of the back button not functioning in the React Multi-level push menu SCSS has

I have been developing a mobile-friendly Multi-level push navigation menu for my website using dynamically generated links based on projects from my GitHub account. I found a push menu on CodePen here and am in the process of integrating it into React inst ...

cssreactjssassnavigationnext.js

Shade within the autocomplete

Is there a way to make the color property warning work on my autocomplete element at all times, rather than just on focus? Any suggestions or workarounds? Check out this code sandbox for reference. I really want the warning color to be visible constantly ...

javascriptreactjsmaterial-ui

TypeScript Redux Thunk: Simplifying State Management

Seeking a deeper understanding of the ThunkDispatch function in TypeScript while working with Redux and thunk. Here is some code I found: // Example of using redux-thunk import { Middleware, Action, AnyAction } from "redux"; export interface ThunkDispatc ...

typescriptreduxredux-thunk

What reasons could lead to useSWR returning undefined even when fallbackData is provided?

In my Next.js application, I'm utilizing useSWR to fetch data on the client-side from an external API based on a specified language query parameter. To ensure the page loads initially, I retrieve data in a default language in getStaticProps and set it ...

javascriptreactjsnext.jsi18nextswr

How can I activate TypeScript interface IntelliSense for React projects in VSCode?

Did you know that there are TypeScript interfaces designed for DOM, ES5, and other JavaScript modules? I am curious if it is feasible to have intellisense similar to the one provided by TypeScript Playground for various interfaces in a React project. ...

reactjstypescriptvisual-studio-codeintellisense

Having trouble with eslint in create-react-app because of a parent folder that also has another app with its own node_modules folder?

I have a git repository with two projects inside: a loopback app (named app) and a create-react-app react app (named client). Here is the directory structure: ├─┬app │ ├──node_modules │ ├─┬client ├─node_modules The loopback ...

node.jsreactjsnpm

Utilize Angular roles to sort and organize website data

Exploring the utilization of login roles in my Angular SPA application which operates solely on the client side, integrated with Spring Security and Spring Boot. I have concerns about potential unauthorized access by a skilled developer who could manipula ...

angularspringtypescriptspring-bootangular7

Having difficulty with pagination within a callback function

I have been attempting to paginate in a call to a callback function, but I am encountering an error on the second call. Here is what my function does: let content = '' let size = 100 let from = 1 function result(size, from, callback) { ap ...

javascriptnode.jsexpressecmascript-6

Arranging arrangements in javascript

I am dealing with objects that contain the fields id and position. const items = [{id: 11, position: 1}, {id: 12, position: 2}, {id: 13, position: 3}, {id: 14, position: 4}, {id: 15, position: 5}, {id: 16, position: 6}]; These objects represent folders st ...

javascripttypescriptalgorithm

An issue arises when using react-tooltip: "There is an error stating that the types of property 'data-tooltip-content' are incompatible."

Here is the code snippet that I am having trouble with: <button type="button" data-tooltip-id="columns-setings-tooltip" className={clsx( styles.rowControlPanelColumnsOptions, isColumnsDialogVisible & ...

reactjsreact-tooltip

Express-Formidable error: Unable to establish headers once they have been transmitted

Using the express formidable module results in an error when the page is loaded twice, as shown on the console: GET /users 304 6.948 ms - - GET /users 304 213.344 ms - - Error: Can't set headers after they are sent. at validateHeader (_http_outgoing. ...

node.jsexpressformidable

Validate on startup in Next.js that essential environmental variables are defined

When initializing a pre-existing Next.js project, it's often overlooked to generate and set up the .env file (or .env.local or equivalent). It would be beneficial if, upon server startup, there could be a check to ensure that essential variables are n ...

next.jsenvironment-variables