初めに
ReactNativeを触ってみて、チュートリアル通りにやっているはずなのに起動したら
こんな画面が出てきてしばらくハマった。
手順
$ react-native init Sample
$ cd Sample
$ react-native run-ios
でビルドが始まり、しばらく待つとiOSのシミュレータが起動する。
動いた〜、とか思って喜ぶと ↑ の赤い画面が出てくる。
原因
アプリ内部からlocalhostで動いているPackergerServerと通信を試みているのだが、
そのPackegerServerを起動する部分で名前の衝突が起きている様子。
↓ こんなエラーログが吐かれている。
This error is caused by a @providesModule declaration with the same name across two different files.
Error: @providesModule naming collision:
Duplicate module name: Sample
Paths: /Users/hira/Documents/git/react-native-sample/Sample/package.json collides with /Users/hira/Documents/git/react-native-sample/Sample/node_modules/react-native/Libraries/Sample/package.json
This error is caused by a @providesModule declaration with the same name across two different files.
at HasteMap._updateHasteMap (/Users/hira/Documents/git/react-native-sample/Sample/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:158:13)
at p.getName.then.name (/Users/hira/Documents/git/react-native-sample/Sample/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:133:31)
~
Process terminated. Press <enter> to close the window
対策
プロジェクト名を Sample
以外 (SampleApp
とか) にする。
$ react-native init SampleApp
$ cd SampleApp
$ react-native run-ios
↓ SampleApp
に変えたら無事起動した。
終わりに
最初からエラーログをちゃんと読めばよかった。
エラーログは細かいところまで読もう。