'Svg' cannot be used as a JSX component

[caiorrsdeg]

*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]

This works fine in the TypeScript Playground.

Does this error also occur when running tsc/building/type-checking the project or is it only visible in the IDE. If the error is only visible in your IDE, which IDE are you using? If not, could you share your tsconfig or, ideally, a minimal, cloneable repository?

[caiorrsdeg]

Hey, that's VSCode, type checking the project. It's a private repo, tomorrow I can give it another try and provide a repo if the issue persists.
tsconfig

{
  "compilerOptions": {
    "baseUrl": "./",
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "esModuleInterop": true,
    "importsNotUsedAsValues": "error",
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noStrictGenericChecks": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext"
  }
}

package.json

"devDependencies": {
    "@commitlint/config-conventional": "^11.0.0",
    "@react-native-community/eslint-config": "^2.0.0",
    "@release-it/conventional-changelog": "^2.0.0",
    "@types/jest": "^27.4.0",
    "@types/lodash": "^4.14.180",
    "@types/react": "^17.0.38",
    "@types/react-native": "0.66.15",
    "@types/vanilla-masker": "^1.2.1",
    "commitlint": "^11.0.0",
    "eslint": "^7.2.0",
    "eslint-config-prettier": "^7.0.0",
    "eslint-plugin-prettier": "^3.1.3",
    "husky": "^6.0.0",
    "jest": "^27.4.7",
    "pod-install": "^0.1.31",
    "prettier": "^2.5.1",
    "react": "17.0.2",
    "react-native": "0.67.2",
    "react-native-builder-bob": "^0.18.0",
    "release-it": "^14.2.2",
    "typescript": "^4.5.5",
    "watch": "^1.0.2"
  },
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "dependencies": {
    "axios": "^0.26.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.34",
    "react-native-modal": "^13.0.1",
    "react-native-reanimated": "^2.3.0",
    "react-native-svg": "^12.1.1",
    "vanilla-masker": "^1.2.0"
  }
  

New and slightly different error

[caiorrsdeg]

Maybe some more data. At build time I get this other error (But I think I should post it on that PR thread, right? does not seem to be related to svg at all)

[rickafds]

@caiorrsdeg try, resolved my problem facebook/react#24304 (comment)

[caiorrs]

Reproduceable sample project https://github.com/caiorrs/react-types-error
I will close the issue because it is not related to react native svg

[caiorrsdeg]

@caiorrsdeg try, resolved my problem facebook/react#24304 (comment)

thanks man, it worked, did not saw it before

[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.

[ocharlespereira]

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.

Thanks my friend!!!!