CODEWITHSUNDEEP
reactjstypescript
George
George

Reputation: 31

JSX element type 'X' is not a constructor function for JSX elements. types returned by 'render()' are incompatible between these types

I get this error on each class component imported in my project, if anyone knows how to solve it, I would really appreciate it

Versions:

"react": "16.9.0",
"react-dom": "16.9.0",
"react-router-dom": "5.1.2",
"typescript": "3.7.4",

TypeScript error in /opt/buildagent/work/508378186b823554/src/AppRouter.tsx(49,7):
   JSX element type 'Router' is not a constructor function for JSX elements.
     The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/opt/buildagent/work/508378186b823554/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type '{}' is not assignable to type 'ReactPortal'.  TS2605

Upvotes: 2

Views: 4244

Answers (2)

Dang Hai Luong
Dang Hai Luong

Reputation: 1356

@types/react recently added a new version with support for react 18, so it is not backwards compatible. Make sure you didn't accidentally installed this package with a react 17 and lower code bases.

Edit:

If you happen to use @types/hoist-non-react-statics as Andrew did, you can lock a @types/react version with your package.json as so:

"resolutions": {
    "@types/react": "17" // Or other version that is equivalent to your react version
  }

Upvotes: 4

user2445933
user2445933

Reputation:

The temp. solution that worked for me - is to go through package-lock.json and change all @types/react, that had 18.* version to the version I had in my own package.json. Those entries were dependencies of @types/hoist-non-react-statics

Before:

    "dependencies": {
        "@types/react": {
          "version": "18.0.1",
          "resolved": "https://registry.npmjs.org/@types%2freact/-/react-18.0.1.tgz",
          "integrity": "sha512-VnWlrVgG0dYt+NqlfMI0yUYb8Rdl4XUROyH+c6gq/iFCiZ805Vi//26UW38DHnxQkbDhnrIWTBiy6oKZqL11cw==",
          "requires": {
            "@types/prop-types": "*",
            "@types/scheduler": "*",
            "csstype": "^3.0.2"
          }
        }
      }

After:

    "dependencies": {
        "@types/react": {
          "version": "16.9.53",
          "resolved": "https://registry.npmjs.org/@types%2freact/-/react-16.9.53.tgz",
          "integrity": "sha512-4nW60Sd4L7+WMXH1D6jCdVftuW7j4Za6zdp6tJ33Rqv0nk1ZAmQKML9ZLD4H0dehA3FZxXR/GM8gXplf82oNGw==",
          "dev": true,
          "requires": {
            "@types/prop-types": "*",
            "csstype": "^3.0.2"
          }
        }
      }

Upvotes: 1

Related Questions