'XXX' cannot be used as a JSX component. Its instance type 'Icon' is not a valid JSX element.

[Athrun-Judah]

• [x] Review the documentation: https://github.com/oblador/react-native-vector-icons
• [x] Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

Environment

windows11

Description

When I upgraded to react18，my icon component reported an error.Such as:

 'MaterialCommunityIcons' cannot be used as a JSX component.
  Its instance type 'Icon' is not a valid JSX element.

this is my code:

import React ,{ useEffect, useState } from "react";
import { Platform, View } from "react-native";
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'

const App = () => {
  const [device, setDevice] = useState<string>('')
  useEffect(() => {
    if (Platform.OS === 'ios') {
      setDevice('ios')
    } else {
      setDevice('android')
    }
  }, [])

 return (
    <View>
       <MaterialCommunityIcons name="calendar" onPress={showDatepicker} size={20} />
    </View>
 )
}

export default App

this is my pakage.json

"dependencies":{
     "expo": "^45.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "^0.69.1",
     "react-native-vector-icons": "^9.2.0",
 },
"devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "@types/react-native": "^0.69.2",
    "typescript": "~4.3.5"
  },
"resolutions": {
    "@types/react": "~18.0.14"
  }

How to solve this problem?

[ildaneta]

I'm running into the same problem.

You can see this issue: https://github.com/oblador/react-native-vector-icons/issues/1405

[breezertwo]

Run into the same issue. In my case it appeared after upgrading to react 18. The external types take the react version specified in this projects package.json, which is 17.0.2.

To fix the type error i use a workaround: Add this to your main package.json

  "overrides": {
    "react-native-vector-icons": {
      "react": "$react"
    }
  },

[Athrun-Judah]

Thanks, I'll try it.

[maciejpankanin]

In my case problem is my project is on RN 0.69 and @types/react-native-vector-icons depends on "@types/react-native" "*" so yarn bundled both 0.69 and 0.70 versions of @types/react-native. Fix for me was adding

resolutions": {
  "@types/react-native": "~0.69.1"
}

to package.json.

It is a bit annoying though.

[Arkan4ik]

nothing work for me. How did you solve problem?

[ornakash]

+1, how do I fix this problem?

[gaithoben]

The Issue is with Latest Version of @types/react:18.x.x This may have been introduced to your project via some other packages' peer dependency.

If you have a .tsconfig file, Add following to compilerOptions:

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

[acro5piano]

@gaithoben Thanks, it worked for me!

[Sergemuhundu]

The Issue is with Latest Version of @types/react:18.x.x This may have been introduced to your project via some other packages' peer dependency.

If you have a .tsconfig file, Add following to compilerOptions:

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

Thanks, It works @gaithoben

[LuongTruong]

Hello @gaithoben , I also face this issue. The thing is, I have the tsconfig.json instead of .tsconfig and my tsconfig.json looks like below

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

And this is my devDependencies:

"devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/ramda": "^0.28.23",
    "@types/react": "^18.0.24",
    "@types/react-native-keep-awake": "^2.0.3",
    "@types/react-native-push-notification": "^8.1.1",
    "@types/react-native-signature-capture": "^0.4.2",
    "@types/react-native-vector-icons": "^6.4.13",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "^18.2.0",
    "typescript": "4.9.5"
  },

Please let me know if anyone has any ideas. Many thanks!

[LuongTruong]

Hello guys, it is me again. I resolved the issue by copy the tsconfig.json in @tsconfig/react-native/tsconfig.json and past it to my main tsconfig.json.

Hope it helps!

[vikrant-sixer]

The Issue is with Latest Version of @types/react:18.x.x This may have been introduced to your project via some other packages' peer dependency.

If you have a .tsconfig file, Add following to compilerOptions:

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

This solved the issue. Thanks for the solution.

[redbluenat]

For me, the solution was to update in the package.json:

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

[grubshka]

I had the same error :

error TS2786: 'Icon' cannot be used as a JSX component.
  Its type 'typeof Icon' is not a valid JSX element type.
    Type 'typeof Icon' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
      Construct signature return types 'Icon' and 'Component<any, any, any>' are incompatible.
        The types returned by 'render()' are incompatible between these types.
          Type 'import("/home/grubshka/devel/apimoov/apps/beeobs-react-native/node_modules/@types/react-native-vector-icons/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
            Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
              Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

136           <Icon name="microphone" size={24} color="#000" />
               ~~~~

The Issue is with Latest Version of @types/react:18.x.x This may have been introduced to your project via some other packages' peer dependency. If you have a .tsconfig file, Add following to compilerOptions:

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

This solved the issue for me too. Thanks for the solution.

[marklanham]

The Issue is with Latest Version of @types/react:18.x.x This may have been introduced to your project via some other packages' peer dependency.

If you have a .tsconfig file, Add following to compilerOptions:

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

I had to place "paths" inside "compilerOptions" like this, but otherwise this worked for me also:

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

[chrisbruford]

None of the fixes here work for me - I'm using react: 18 react-native: 0.73.4

both packages and their @types packages are only present once (as reported by yarn why) and so there doesn't seem to be a version conflict.

The compilerOptions workaround did remove the warning in the IDE but created a compile error unable to resolve react.