モノレポ構成で Expo を導入したときのハマりポイントまとめ

環境構築でハマったのでそのメモです。同じハマり方をした方の参考になれば。

主に以下の2つのエラーが出てハマりました。

各々、原因と解決策を書いていきます。

Error: Cannot resolve entry file

これは、普通に Expo を monorepo で packages 配下に置いてしまうとパスの参照がうまく取れなくて発生してしまうエラーです。エラー内容は以下。

shell
Error: Cannot resolve entry file:
The main field defined in your package.json points to a non-existent path.

monorepo 構成のパッケージで、無邪気に expo init して 巻き上げが行われてしまうとうまく動きません。これは、node_modules 内のパスの参照がうまく取れずに起きるエラーっぽいです（node_modules が親に行ってしまうため）

解決策

以下のツイートのように、この問題を解決するライブラリを Expo が提供してくれているので、それを導入します。

書かれている通りに設定するだけですんなり動きました。良かった。

Invalid Hook Call Warning

monorepo のパス問題は上記のライブラリで解決したのですが、その後、アプリケーション起動時に以下のようなエラーが発生しました。

JavaScript
Invalid Hook Call Warning. Hooks can only be called inside the body of a function component

これは、公式でも言及されているエラーのようで、以下の3つの原因のいずれかとのことでした。

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

You might be breaking the Rules of Hooks.

React と React DOM のバージョンのミスマッチか、Reack Hooks の記述箇所が誤っているか、React がアプリケーション内に複数存在しているか、のいずれかやで、と言っています。僕はアプリケーションを初期化したばかりだったので、3 確定でした。

僕の環境の場合、React Native アプリケーション（Expo）と Web 用の Next.js アプリケーションが monorepo 化してパッケージ管理されているという構成になっていました。Expo も Next.js もそれぞれReact 製で、それぞれのバージョンが別々となってしまっており、巻き上げられたときに複数バージョンが入ってしまっていたようです。

解決策としては、Next.js で使用している React のバージョンと、React Native で使用している React のバージョンを揃えることにしました。揃えて、改めて yarn install することで、エラーが消えました。

🐈

同じエラーにハマった方の参考になれば幸いです。