Not a jsx element on using @expo/vector-icons

  1. SDK Version: 44.0.0
  2. Platforms(Android/iOS/web/all): all

When I*m trying to use an icon from ‘@expo/vector-icons’ I get this error whenever I try to insert it as a child element in a View (or any components accepting a child)

cannot be used as a JSX component.
  Its instance type 'Component<IconProps<"search" | "repeat" | "link" | "at" | "key" | "push" | "map" | "filter" | "body" | "code" | "menu" | "time" | "ellipse" | "image" | "stop" | "text" | "alert" | "checkbox" | "radio" | ... 3661 more ... | "md-woman-sharp">, {}, any>' 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("C:/Users/user/Projects/rnproject/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'

What does this mean and why doesn’t it work? I can’t even copy paste the example in the docs without getting the same error.

Hey @magink, without seeing your code it’s hard to help you. Ideally seeing your full implementation but even a specific link to the example you mention from the docs would be a start.

Cheers,
Adam

It’s this example. Just copied and pasted. Icons - Expo Documentation

Does the error go away when you remove the icon from your jsx? Is it possible that you are not importing the icon correctly?

If you believe you’re doing everything right then please share the following:

  1. Import statement line
  2. Line of code showing how you’re adding the icon in your code
  3. Complete error message (sharing the problematic line pointed out by the log message may also be very helpful)

Hi @magink

If you click on the button to view the example on Snack, you should be able to open the snack in Expo Go. If I try it it works for me.

Also, if I create a new Expo app, run expo install @expo/vector-icons and then copy the contents of App.js from the above snack and paste it in the App.js from the newly created app, overwriting the contents that were created by expo init, then I can run that app in Expo Go and again it works.

Does the above work for you?

If the above works, but your real app does not, perhaps you can see some relevant difference that’s causing the problem in your app. If you still can’t find the problem, please post a small example app that shows the problem.

SOLUTION:
add the following to your package.json and run npm install or yarn:
“resolutions”: {
@types/react”: “17.0.2”,
@types/react-dom”: “17.0.2”
},

Credit: typescript - NPM package cannot be used as a JSX Component - Type errors - Stack Overflow

2 Likes

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.