はじめに伝えたいこと
個人開発でNext.jsによるWEBアプリとReact Native(Expo)によるネイティブアプリを実装するにあたり、モノレポで構築することとしました。
その際にReact Nativeの環境構築でいきなり手詰まりをしてしまったので、その内容を伝えるとともに、モノレポは思わぬエラーを発生するリスクがあることをお伝えしたく記事にしました。
つまづいたこと
React Nativeの実装の際、公式の手順に従ってモノレポ対応に必要なmetro.config.jsを追加したのですが、以下のようなエラーを延々と吐き続けるというエラーに遭遇しました。
解決法は
monorepo環境でExpoを使っているときに出る Invariant Violation: No callback found with cbID xxxx and callID xxxx for module . Args: '[xxxxx]', js engine: hermes を解消する
を参考にmetro.config.jsに「config.resolver.disableHierarchicalLookup = true;」を追加することとわかったのでそれで対処できました。
何が違ったのか
一言で言えばJSのモジュールバンドラーの性能の違いによるものであるようです。
Next.js
webpackが使われていますが、webpackではモジュールなどの依存関係を再帰的に検索をするので、特に追加の設定をせずともモノレポでもエラーはしなかった。（近々tubropackになると思われます）
React Native
metroが使われていますが、webpackと異なり再帰的な解決を行わないため、metro.config.jsファイルで明示する必要があるようです。
（公式のテンプレートでなぜつまづきポイントの明示がなかったのかは不明。常識だから？）
今回のモノレポ構成について改めて考えてみたこと
今回の件を受けて、個人的なモノレポへの見解を整理しました。
モノレポ採用の主な理由
- UIコンポーネント、エンドポイント、環境変数などの共通化
- 開発効率の向上
メリット
- コードの再利用性向上
- 一貫性のある開発環境の構築
デメリット
- 異なるフレームワークを統合することによる思わぬ問題発生のリスク
- 設定の複雑化
最後に
実プロダクトにおいてもNext.jsによるWEBアプリとReact Nativeによるネイティブアプリという組み合わせは今後益々増えていくかと思っています。
その際に今回のようにモノレポを採用するか否かといった議論になり得ると思いますが、今回のような思わぬつまづきに遭遇し得るということも念頭に置いておくと良いかと思います。
今回は思わぬところでつまづき時間を要しましたが、色々調べて再考するにはいい機会だったということにしておきます。