aknow2

自分の興味のある事を連々と(プログラミング、モバイルアプリ、プログラミング教育)

【React Native(RN)】RNのプロジェクトフォルダ内に、別のNode.jsプロジェクトを作るとRNのビルドエラーになる

どんな時に発生するか

React Nativeのプロジェクトフォルダ内に、別のNodejsプロジェクトを作った場合に発生します。
私の場合、Node.js for MobileというスマホアプリからNode.jsが実行できるモジュールを使った際に発生しました。

現象

以下のエラーログが吐かれRNのビルドに失敗する。

jest-haste-map: @providesModule naming collision: Duplicate module name
なぜ起きるのか

ReactNativeで使用しているMetroに原因がある。Metroはnpmのグローバル環境に通常はインストールされ,ソースコードの変更をウォッチしている。なので、ビルドする時にRNのプロジェクトルートにあるpackage.jsonとnode_modulesだけでなく、子フォルダにあるpackage.jsonやnode_modulesも見に行き名前の衝突が発生してビルドエラーになる。

対策

metroに特定のフォルダを無視する様に設定する。
手順 RNのプロジェクト直下にrn-cli.config.jsを作成する。
rn-cli.config.jsに以下の様に記述する。

const blacklist = require('metro').createBlacklist;
module.exports = {
    resolver: {
      blacklistRE: blacklist([
        /無視したいフォルダ名\/.*/,
      ])
    },
  };

無視したいフォルダ名を問題の起きているフォルダ名に変更すれば出来上がり、これでビルドは通るはず。