'Svg' cannot be used as a JSX component
See original GitHub issue*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:
- 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;
Issue Analytics
- State:
- Created a year ago
- Comments:9
Top GitHub Comments
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
ornpm ls @types/react
) tryresolutions
with yarn ornpm-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.