'Svg' cannot be used as a JSX component

*First bug open here, sorry if not doing it right

Bug

When using an SVG converted with SVGR Typescript raises an error about ‘…’ cannot be used as a JSX component, where … is a component from react-native-svg for example:

(alias) const Svg: React.ComponentClass<SvgProps, any>
import Svg
'Svg' cannot be used as a JSX component.
  Its instance type 'Component<SvgProps, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("/Users/caio/Projects/ufe-mobile/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.ts(2786)

tested on 12.1.0 (what we are using) and 12.3.0 (latest) with expo 44 The project uses a builder bob made package

"react": "17.0.2",
"react-native": "0.67.2",
"react-native-builder-bob": "^0.18.0",
"react-test-renderer": "17.0.2",
"typescript": "^4.5.5",

example project inside the package

"expo": "^44.0.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",

Unexpected behavior

The example expo app is not able to run due to the typescript issue

Environment info

Run react-native info in your terminal and copy the results here. Also, include the precise version number of this library that you are using in the project

React native info output:

System:
    OS: macOS 12.3
    CPU: (8) x64 Apple M1
    Memory: 23.13 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.17 - ~/.yarn/bin/yarn
    npm: 8.1.1 - ~/.nvm/versions/node/v14.15.1/bin/npm
    Watchman: 2022.03.14.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 28, 29, 30, 31
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 31.0.0
      System Images: android-25 | Google APIs ARM 64 v8a, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs ARM 64 v8a, android-30 | Google APIs ARM 64 v8a, android-31 | Google APIs ARM 64 v8a, android-31 | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 13.3/13E113 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.67.2 => 0.67.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.1.0

Steps To Reproduce

create a react native builder bob package with expo (JS/TS only) grab a svg from web and use SVGR to create a react native component copy the output from SVGR playground to a new component on the example app the TS error should be displayed

Describe what you expected to happen:

1. Run the app and show the icon

import Svg, { Path, SvgProps } from 'react-native-svg';

import React from 'react';
import { memo } from 'react';

const SvgComponent = (props: SvgProps) => (
  <Svg viewBox="0 0 72 72" {...props} fill="none">
    <Path
      fill={props.fill}
      d="M60 68H12v-8c0-13.25 10.75-24 24-24s24 10.75 24 24v8ZM36 32c7.732 0 14-6.268 14-14S43.732 4 36 4s-14 6.268-14 14 6.268 14 14 14Z"
    />
  </Svg>
);

const Memo = memo(SvgComponent);
export default Memo;

[eps1lon]

If you’re seeing “SomeComponent cannot be used as a JSX component.” after installing React 18 types make sure to only have a single version of @types/react installed. Try to dedupe it first by removing it’s lockfile entry and running npm/yarn again. If you still see duplicate versions of @types/react (yarn why @types/react or npm ls @types/react) try resolutions with yarn or npm-force-resolutions with npm.

The issue is not caused by a specific version of @types/react but having types for 18 and before 18 installed at the same time.

[brennanbutler01]

If you’re seeing “SomeComponent cannot be used as a JSX component.” after installing React 18 types make sure to only have a single version of @types/react installed. Try to dedupe it first by removing it’s lockfile entry and running npm/yarn again. If you still see duplicate versions of @types/react (yarn why @types/react or npm ls @types/react) try resolutions with yarn or npm-force-resolutions with npm.

The issue is not caused by a specific version of @types/react but having types for 18 and before 18 installed at the same time.

@eps1lon Thanks so much for this. Updating my package.json with: "resolutions": { "@types/react": "18.0.1" } and running yarn install again fixed the error.