React Nativeの環境構築周りで起こったエラーとその対処法を備忘録として残します。

Metro has encountered an error: Cannot read properties of undefined (reading ‘transformFie’)

原因

nodeのバージョンによるエラーです。
エラーが出たバージョンはv17.xで、v16.13.0にダウングレードすることによって問題が解決しました。(2022年3月28日時点)

ダウングレード方法

Macユーザの方は、nodebrewを使えばnodeのバージョンを簡単に変更できます

nodebrewを使ったダウングレード方法

nodebrewが無い人はインストールしましょう。

brew uninstall --force node
brew install nodebrew

続いてパスを通します。
シェルはbashを使ってるなら~/.bash_profileに、zshを使ってるなら~/.zprofileに

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
nodebrew setup
source ~/.bash_profile

• シェルの種類は、$が表示されていればbash、%が表示されていればzshを使用しています

v16.13.0をインストールします。

nodebrew install-binary v16.13.0
nodebrew use v10.15.0

バージョン確認をしてv16.13.0ならOK

node -v

参考:

シュミレータが新しいアプリのファイルを参照しない。昔作ったファイルを参照している。

キャッシュの問題です。キャッシュを一通りクリアします。

参考:

Metro Bundlerの強制終了

前節の通りキャッシュをクリアしようとしてもMetro Bundlerがどこかで起動しているために、エラーが出てキャッシュをクリア出来ない場合があります。

その際、コンソールにはエラー「listen EADDRINUSE: address already in use :::8081」と、Metro Bundlerが使用中のポート番号が表示されます。

これはReact Nativeに限った話ではなくUNIXコマンドの話ですが、参考までにこのポートを利用しているプロセスの強制終了の方法を載せます。

まずはポート番号を使っているプロセスのIDを調べます。

lsof -i -P | grep ポート番号

そして、そのプロセスIDを強制終了します。

kill -9 プロセスID

これでMetro Bundlerをリフレッシュできるはずです。

まとめ

React Nativeで出るエラー「Metro has encountered an error: Cannot read properties of undefined (reading ‘transformFie’)」から解決に向けて、一連の解決方法を紹介しました。