トップ/記事一覧

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

📆November 08, 2020🔖 React NativeExpoNext.js

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

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

  • Error: Cannot resolve entry file
  • Invalid Hook Call Warning
  • 各々、原因と解決策を書いていきます。

    Error: Cannot resolve entry file

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

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

    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 have mismatching versions of React and React DOM.
  • You might be breaking the Rules of Hooks.
  • You might have more than one copy of React in the same app.
  • 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 することで、エラーが消えました。


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