DEV Community

Cover image for How to fix the regular error using react-icons in React with Typescript?
Sahba Rezvani
Sahba Rezvani

Posted on

3

How to fix the regular error using react-icons in React with Typescript?

Starting from version 19, the typings for @types/react introduced a major change!
Now, by default, the JSX namespace is no longer available, and you have to explicitly define it yourself.

🧠 Why did this happen?
In the new versions of TypeScript and React typings:

JSX.Element is not available directly unless you properly configure your environment.

If your project is old, or if your tsconfig.json file is missing some settings, TypeScript will not be able to recognize JSX.

💡 Solution 1 (Quick and Easy):

Go to your project’s tsconfig.json file.
Make sure you have these important options configured like this:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "module": "esnext",
    "target": "esnext",
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

👉 The most important part is:
"jsx": "react-jsx"

💡 Solution 2 (Definitive and 100% Working):

Create a new file called global.d.ts at the root of your project.
Inside it, add the following lines:

/// <reference types="react" />
/// <reference types="react-dom" />

Enter fullscreen mode Exit fullscreen mode

This tells the project:
"Hey buddy, grab the JSX namespace from React!"

But of course before all these, you need to check if these two are installed in your project:

npm install --save react react-dom
npm install --save-dev typescript @types/react @types/react-dom

so the error you get is clearly because of your project's typing and not because of the way you're using the react icons!

Hope it helps❤
And if it does, please do like, share and leave me a comment.

Build gen AI apps that run anywhere with MongoDB Atlas

Build gen AI apps that run anywhere with MongoDB Atlas

MongoDB Atlas bundles vector search and a flexible document model so developers can build, scale, and run gen AI apps without juggling multiple databases. From LLM to semantic search, Atlas streamlines AI architecture. Start free today.

Start Free

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

👋 Kindness is contagious

Explore this insightful write-up embraced by the inclusive DEV Community. Tech enthusiasts of all skill levels can contribute insights and expand our shared knowledge.

Spreading a simple "thank you" uplifts creators—let them know your thoughts in the discussion below!

At DEV, collaborative learning fuels growth and forges stronger connections. If this piece resonated with you, a brief note of thanks goes a long way.

Okay