[Solved] NPM package cannot be used as a JSX component

The  NPM package cannot be used as a JSX component error occurs if you have installed multiple versions of @types/react package, one with version 18 and another with version 17.0.2 The @types/react is part of TypeScript and it contains the type definitions for React.

In this article, we will take a look at what is NPM package cannot be used as a JSX component error means and how to resolve this error with examples.

What is an NPM package cannot be used as a JSX component?

For certain packages like react-timeago, react-native-svg‘, react-custom-scrollbars-2, we will get the below error while installing and using the package in the react component.

For react-timeago

'TimeAgo' cannot be used as a JSX component.

For react-native-svg

'Svg' cannot be used as a JSX component.

This usually happens due to the @types/react version conflict or multiple versions present. The @types/react contains the type definitions for React.

For instance, you may have @types/react with the latest version of React 18, and also, you have installed another version 17.0.2.

The same issue can also happen because the packages that you use may have set the @types/react package to the latest version in their package.json and thus resulting in the conflict.

How to fix NPM package cannot be used as a JSX component

There are multiple solutions to this issue, and you can use one of them to resolve the issue.

Solution 1 – Set the version in the resolutions

We need to fix the @types/react package version because many react libraries have dependency set as @types/react : "*". The * indicates to refer to the latest version of the package at this point; it is React 18.

As shown below, we can fix the version issue by modifying the package.json.

"resolutions": {
  "@types/react": "17.0.2",
  "@types/react-dom": "17.0.2"
},

This works perfectly in the case of yarn, but if you are using the NPM, you need to modify the script section as shown below.

"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"

The script will ensure to use npm-force-resolutions package to fix versions from the resolution.

Now perform the standard npm install, and everything should work without any issue.

Solution 2 – Update the npm to the latest version

Another way to resolve this issue is to upgrade the Node Package Manager to the latest version. The issue is mainly noticed in the version ^6.0.0, and upgrading to version ^8.0.0 will solve the issue.

For windows

npm install npm@latest -g

For Linux

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Conclusion

The NPM package cannot be used as a JSX component error occurs because of the version conflict with @types/react package. 

Most of the libraries would have set the @types/react dependency to the latest version in their package.json, and due to which, you will have multiple versions of the same packages conflicting with each other.

We can resolve the issue by explicitly setting the version @types/react in the package.json resolutions.