[Fix] cannot be used as a JSX component

Recently when I was coding in react jsx, some class components in my code started giving me an unexpected error; Some components “cannot be used as a JSX component.” A snippet of the error is given below when I was trying to use the EverySelector class:

'EverySelector' cannot be used as a JSX component.

I would like to share the steps that helped me to fix the error; “cannot be used as a JSX component”.

Why cannot be used as a JSX component error is seen?

The error, “cannot be used as a JSX component”, is seen because when React 18 was released it seemed to have broken multiple packages which had set their @types/react dependency to *. More about this is mentioned in here.

A detailed solution to fix the “cannot be used as a JSX component” error is provided below:

How to fix “cannot be used as a JSX component” error?

A simple solution to fix this you would have to update  react & react-dom, and if the problem still exists add package.json to the react-native expo blank typescript template. After adding the package you will have to re-install yarn again.

To resolve the error cannot be used as a JSX component” you must follow the below steps:

First, try to update the version of  react & react-dom you are using with the below-mentioned command.

npm i react@18 react-dom@18 @types/react@18 @types/react-dom@18

If you are still facing the error even after following the above steps you will have to try the below mentioned steps.

You will have to add the package.json in your react-native expo blank typescript template and write the below-mentioned code.

  "resolutions": {
    "@types/react": "~17.0.47"
  },

After writing the code you will have to do the yarn install again in your folder tsconfig.json using the below-mentioned code/

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "esModuleInterop": true,
    "strict": true,
    "jsx": "react"
  }
}

Conclusion

To fix the “cannot be used as a JSX component” error; you would have to update  react & react-dom, and if the problem still exists add package.json to the react-native expo blank typescript template. After adding the package you will have to re-install yarn again.