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.

MongoDB Atlas runs apps anywhere. Try it now.

MongoDB Atlas runs apps anywhere. Try it now.

MongoDB Atlas lets you build and run modern apps anywhere—across AWS, Azure, and Google Cloud. With availability in 115+ regions, deploy near users, meet compliance, and scale confidently worldwide.

Start Free

Top comments (0)

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

Heroku

Tired of jumping between terminals, dashboards, and code?

Check out this demo showcasing how tools like Cursor can connect to Heroku through the MCP, letting you trigger actions like deployments, scaling, or provisioning—all without leaving your editor.

Learn More

👋 Kindness is contagious

Discover fresh viewpoints in this insightful post, supported by our vibrant DEV Community. Every developer’s experience matters—add your thoughts and help us grow together.

A simple “thank you” can uplift the author and spark new discussions—leave yours below!

On DEV, knowledge-sharing connects us and drives innovation. Found this useful? A quick note of appreciation makes a real impact.

Okay