[React-Native][TypeScript] cannot be used as a JSX component. 해결법

react native를 처음 타입스크립트로 프로젝트를 생성을 했는데

기본 컴포넌트들을 찾지 못한다는 error가 발생했습니다.

 

원인

node_modules/@types/react-native/node_modules/@types/react/index 파일에 들어가 보니

react 버전이 17로 되어 있었습니다.

그런데 package.json에는 react와 @types/react 버전이 18로 되어있다 보니 

충돌이 생겨서 기본 컴포넌트를 불러오지 못하는 에러였습니다.

 

해결방안

package.json에서 react와 @types/react 버전을 17로 낮추고, 터미널에서 아래의 명령어를 수행하면 에러가 없어집니다.

rm -rf node_modules package-lock.json
npm install

이렇게 실행후 node_modules의 파일 구조가 바뀌어 있습니다.

 

참고

https://velog.io/@sweetpumpkin/ThemeProvider-cannot-be-JSX-element-%EC%97%90%EB%9F%AC

[TypeScript] cannot be used as a JSX element 에러 해결방법

https://stackoverflow.com/questions/71916289/react-native-component-cannot-be-used-as-a-jsx-component-type-is-not-as

React Native: 'Component' cannot be used as a JSX component. Type '{}' is not assignable to type 'ReactNode'