CODEWITHSUNDEEP
reactjstypescriptreact-domtsx
andypaxo
andypaxo

Reputation: 6641

TS2786 'Component' cannot be used as a JSX component

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.

Upvotes: 63

Views: 132359

Answers (25)

Victor Vargas
Victor Vargas

Reputation: 201

I updated tsconfig.json file with this to fix this issue.

{
  "compilerOptions": {...
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
  }
}

Upvotes: 1

Amey Shirke
Amey Shirke

Reputation: 734

Add below in .tsconfig.json --> compilerOptions

"compilerOptions": {
    "paths": {
      "react": [ "./node_modules/@types/react" ]
    }
 }

Upvotes: 11

Didii
Didii

Reputation: 1363

Not relevant to the OP, but if anyone else comes across the same issue when upgrading styled-components to v6. It now comes bundled with types (as mentioned in their upgrade docs) so you need to uninstall @types/styled-components.

Reason: the @types/styled-components library refers to types from @types/react-native, and these types clash with the types from @types/react. Before uninstalling, you can run npx npm-why @types/react-native to see if @types/react-native is actually present and which library requires it and again when you uninstalled it to verify that the types are not present anymore.

Upvotes: 0

RusJaI
RusJaI

Reputation: 794

Here's the approach that I used to solve this : If your project is a maven project, follow the below steps :

  1. Add a resolutions field inside the package.json and under scripts filed in package.json, add a preinstall script to apply the added resolution (As instructed in [1] or [2])

     "resolutions": {
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0"
 },
 "scripts": {
     "preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions",
     "build:prod": "NODE_ENVS=production; npm run i18n; npm run i18n:compile; rimraf site/public/dist/ && NODE_OPTIONS=--max_old_space_size=4096 webpack --mode production --stats=errors-only",
     "build:dev": "rimraf site/public/dist/ && webpack --mode development --watch"
 },

  2. Go to the pom.xml file of the corresponding component and add the preinstall script inside <properties>

    <properties>
        <npm.preinstall.command>preinstall</npm.preinstall.command>
        <!-- add other properties if applicable -->
    </properties>

Add a new section to specify the execution, under the maven execution plugin properties inside ````` Following is an example :

  <plugins>
      <plugin>
          <groupId>org.codehaus.mojo</groupId>
          <artifactId>exec-maven-plugin</artifactId>
          <version>1.6.0</version>
          <executions>
              <execution>
                  <id>npm run preinstall scripts</id> 
                  <goals>
                      <goal>exec</goal>
                  </goals>
                  <phase>initialize</phase>
                  <configuration>
                      <executable>npm</executable>
                      <arguments>
                          <argument>run</argument>
                          <argument>${npm.preinstall.command}</argument>
                      </arguments>
                  </configuration>
              </execution>
              <!-- add other applicable executions here -->
          </executions>
      </plugin>
      <!-- add other applicable plugins here --> 
  </plugins>

[1] https://judy-webdecoded.medium.com/component-from-npm-module-cannot-be-used-as-a-jsx-component-99e895382041 [2] https://github.com/facebook/react/issues/24304#issuecomment-1092563688

Upvotes: 0

Emzar Panikashvili
Emzar Panikashvili

Reputation: 11

In my case I've been facing this problem working with the following environment:

  • npm: 10.5.2
  • node: v20.13.1
  • IntelliJ WebStorm: 2023.3.3
  • react: 18.3.1
  • react-dom: 18.3.1
  • @types/react: 18.3.2
  • @types/react-dom: 18.0.11
  • @types/node: 18.14.6
  • typescript: 4.9.5

The problem disappeared when I have upgraded the @types/node and typescript:

  • @types/node: 20.12.11
  • typescript: 5.4.5

Upvotes: 1

jose920405
jose920405

Reputation: 8057

In my case, this happened to me with a fresh react-native project. This is why this was so confusing. The fix in my case was really, I had to re-install @types/react to use the latest version. I'm not sure why the npx react-native@latest init command did not use the latest version of those types.

yarn add --dev @types/react

Upvotes: 0

mansoureh.hedayat
mansoureh.hedayat

Reputation: 645

It appears that TypeScript is having trouble with async components, expecting JSX but not recognizing Promise. To address this, some are type casting the component and exporting the casted version. One workaround is to use the @ts-expect-error directive to ignore TypeScript errors related to async components temporarily. However, once TypeScript updates its types, this directive might become unnecessary. The fix for this issue could potentially be included in the next TypeScript plugin update.

<div>
  {/* @ts-expect-error Server Component */}
  other codes ... 
</div>

Upvotes: 0

Anurag Shrivastava
Anurag Shrivastava

Reputation: 692

The problem arose after updating to the latest version (18) of @types/react. Many React libraries depend on @types/react with a wildcard "*", causing them to automatically upgrade to version 18 when installing modules or creating builds. This can lead to compatibility issues if the code isn't updated to support version 18.

Identifying the issue was tricky because it might appear that nothing changed in the package.json file, but the problem lies in the automatic upgrade to @types/react version 18 due to the wildcard dependency.

To resolve this until the packages are updated, you can force the use of the older version of @types/react. If you're using Yarn, you can add this to your package.json:

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

Upvotes: 5

David Habeeb
David Habeeb

Reputation: 9

For me, I mistakenly added async to the react component. Removing it and creating my async function inside the react component fixes mine.

export async const Component = () => {
   
}

to

export const Component = () => {
    const asyncFunction = async () => {
}}

Upvotes: 0

Younis Rahman
Younis Rahman

Reputation: 737

After updating React Native from 0.66.3 to 0.70.6, I faced the 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 changing this, remove node_modules directory and run npm i or yarn.

Upvotes: 7

Jan
Jan

Reputation: 466

If you are using some older React based libraries, maybe there is a mismatch in your React types. Try adding this to your tsconfig.json ("compilerOptions"):

"paths": {
    "react": [ "./node_modules/@types/react" ]
}

Upvotes: 3

Luis Pereira
Luis Pereira

Reputation: 350

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!

Upvotes: 1

Ethan.Li
Ethan.Li

Reputation: 101

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

yarn add --dev @types/react

Upvotes: 2

Roberto Yoc
Roberto Yoc

Reputation: 521

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/[email protected]", "@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

Upvotes: 0

fruitloaf
fruitloaf

Reputation: 2930

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>)

Upvotes: -2

greeneley
greeneley

Reputation: 117

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

Upvotes: 1

Hammad Hassan
Hammad Hassan

Reputation: 622

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"
},

Upvotes: 0

Benny Code
Benny Code

Reputation: 54965

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.

Upvotes: 57

Seeliang
Seeliang

Reputation: 2949

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

Upvotes: 6

Isuru Sathyajith
Isuru Sathyajith

Reputation: 116

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. :)

Upvotes: 8

Preeti
Preeti

Reputation: 501

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.

Upvotes: 1

Vikas Sharma
Vikas Sharma

Reputation: 735

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

Fix it with npm dedupe or yarn dedupe

Upvotes: 5

Rasikh
Rasikh

Reputation: 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.

Upvotes: 0

chantey
chantey

Reputation: 5845

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.

Upvotes: 13

DocCaliban
DocCaliban

Reputation: 1104

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.

Upvotes: 87

Related Questions