TS2786 'Component' cannot be used as a JSX component

Question

I have a React Typescript application that won't compile. Many components have a render method that is typed to return React.ReactNode or React.ReactElement. On compile, many errors similar to the following are reported:

TS2786: 'MessagesWidget' cannot be used as a JSX component.
 Its instance type 'MessagesWidget' is not a valid JSX element.
 The types returned by 'render()' are incompatible between these types.
 Type 'React.ReactNode' is not assignable to type 'import("/home/node/app/node_modules/@types/react-calendar/node_modules/@types/react/index").ReactNode'.

Why is the compiler expecting ReactNode as defined by the types bundled with react-calendar? I do have @types/react-dom installed as a dev dependency.

Other information that might be relevant:

1. This project was compiling until a couple of days ago and there were no code changes when the compile started failing, so I suspect that a package update triggered this (even if that's not the root cause). The only dependencies that were updated in the time window when the compile started failing were @types/react and @types/react-dom. Rolling these packages back to an older version did not fix the issue, however.
2. Changing my components render methods to return JSX.Element removes the compiler error, but there are third party components in the application where this is not possible.

Answer 1

I have a solution, it seems that there are a ton of breaking changes in the 18.0.1 type definitions.

Like you, I could not solve it by rolling back to earlier versions, but investigation lead me to discover that this was because 'react-router' among others was bringing in the '18.0.1' version.

to get around this, I added the following to my package.json

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

Then I cleared my node-modules, and my package cache and then re-ran yarn to pull fresh packages.

The resolutions section is for yarn (which I use). and I think you can use 'overrides' instead of 'resolutions' if you are using NPM.

npm version should >= 8 https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

and delete package-lock.json before npm i.

Answer 2

Error TS2786 often comes from a mismatch in @types/react.

When you have libraries that are dependent on a specific version of @types/react (i.e. v17.0.47) and you have other libraries working with a different major version of @types/react (i.e. v18.0.14), then this can cause compatibility issues when using React.ReactNode or JSX.Element. The type JSX.Element is usually returned by a React Function Component.

You can solve the problem by streamlining your dependencies on @types/react, so that these follow the same major version. You can find all libraries depending on @types/react in your project by executing npm explain @types/react (when a package-lock.json file is present) or yarn why @types/react (when a yarn.lock file is present).

In your specific case there seems to be a dependency from @types/react-calendar to @types/react. Your problem seems to be that there are other dependencies in your project using a different version of @types/react. Maybe you even have a direct dependency on @types/react where the exact version number is different from the @types/react version required by @types/react-calendar.

Here is a video that shows how to inspect the applied version of @types/react in your own project.

Answer 3

This can occur when returning children:

export const Component = ({ children }) => {
    //...do stuff
    return children
}

To fix, wrap in a fragment:

return <>{children}</>

I believe this is because children may be an array of elements and we are only allowed to return a single element. The usual message for this kind of error is:

JSX expressions must have one parent element.

Answer 4

This issue comes with mismatch in @types/react versions TS2786

Fix it with npm dedupe or yarn dedupe

Answer 5

After update React native from 0.66.3 to 0.70.6 I faced same issue. I solved the problem by changing the "resolutions" in the package.json

"resolutions": {
    // "@types/react": "^17" remove this
    "@types/react": "^18.0.8" //adding this
 },
  // After Change remove node_modules 
  // run npm i OR yarn

 
 

Answer 6

If there's a yarn user wandering around; who had this issue after doing a react/react-native version upgrade recently; just delete the existing yarn.lock file & the node_modules folder and run yarn install again is what worked for me. :)

Answer 7

None of the answers above solved my case for the same typescript error TS2786
how I get it work is update tsconfig.json

from

{
  "compilerOptions": {
    "preserveSymlinks": true,
    ...

to

{
  "compilerOptions": {
    "preserveSymlinks": false,
    ...

or just simply remove it

Answer 8

I resolved this issue by changing ``jsx: 'react' in tsconfig.json into jsx:react-jsx

Answer 9

The problem is because react-route v18 does not support react-virtualized and it should be downgraded.

So the simple way is to downgrade your route as below:

"@types/react": "17.0.0",
"@types/react-dom": "17.0.0"

Then, your app should work properly.

Answer 10

Just add the latest version of react and react-dom in package.json and run below command to re-install react and react-dom

Here , while posting this answer, latest version of react and react-dom is 18.

Steps-

1. Remove package-lock.json file of your proect
2. Open package.json of your project.
3. replace react and react-dom version

"@types/react": "^18",

"@types/react-dom": "^18"

4.Run command

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

Done. It resolved my issue.

Answer 11

I was facing the same issue about this error. I add the below code to my package.json file and got resolved.

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

Answer 12

my one got solved after I fixed the RETURN statement of my child component

I had in there:

return; <form></form>

changed to:

return (<form></form>)

Answer 13

If you previously had a resolution for react 17:

"resolutions": {
    "@types/react": "^17.0.0"
 },

it generates an entry in package-lock/yarn lock that won't be removed when you update. So you need to remove this resolution and the yarn lock entry. It looks like this:

"@types/react@*", "@types/react@17.0.21", "@types/react@^17":
  version "17.0.21"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.21.tgz#069c43177cd419afaab5ce26bb4e9056549f7ea6"
  integrity something
  dependencies:
    "@types/prop-types" "*"
    "@types/scheduler" "*"
    csstype "^3.0.2"

Removing both and running install again should solve your problem

Answer 14

If you didn't add @types/react, please add it first by:

yarn add --dev @types/react

Answer 15

I will tell about the react-native project. All these answers didn't help me. But I found out the reason for this issue in my project. I forgot to fill "types" parameter in tsconfig.json.

Adding

"types": ["react-native", "jest"]

helped me. Cheers!