📱

expo initした時に"Component cannot be used as a JSX component" エラーが出る件について

2022/05/02に公開

TL;DR

新しくexpo initしてreact-nativeアプリを作ろうと思ったが,"Component cannot be used as a JSX component"が出ている人向けの応急処置記事です.結論から言うと,react-nativeライブラリがreact 18系の型パッケージを参照していることが原因です.

問題と解決方法

さっそく,tabs (TypeScript)のtemplateを選択してexpo initをしてみると~/navigation/index.tsxで以下のようなエラーが発生します.
該当コードのエラー
該当コードのエラー
該当コードのエラー文
該当コードのエラー文
他にもexpo-iconsをつかっていても同様にJSXコンポーネントとして使えないよ!!っと怒られてしまいます.
これは,何が原因かと言うと,dependenciesにはreact 17系のパッケージが入っているにもかかわらず,react-nativeがreact18系の型のパッケージを読み込んでいるからです.
yarn.lockファイル内,react 18系が読み込まれている
yarn.lockファイル内,react 18系が読み込まれている

この問題を解決するために,package.json内でresolutionsをつかってreact-nativeが参照するパッケージを決定します.具体的には以下のようにします.

yarnの場合

"resolutions":{
    "@types/react": "17.0.39"
  },

npmの場合

  "overrides":{
    "@types/react": "$@types/react"
  },

これで無事,react-nativerもreact 17系のパッケージを参照してくれます.

おわりに

今回書いた手法はあくまでも応急処置なので,Expoが本格的にreact 18に対応した場合,resolutionsは使わずに通常通りパッケージ運用を行ってください.

また,expo sdk 45のbeta版がつい4日前(2022/05/02現在)リリースされたばかりなのですが,恐らくそちらではreact 18の対応をしているんじゃ無いんでしょうか.長い文章を最後まで読んでいただきありがとうございました.役にたった方はいいねしていただけると幸いです.thank you!

Discussion

ログインするとコメントできます