Yuri’s Tech Note

技術系アウトプット

React Native 0.57 アップデート

react-native-git-upgradeコマンドが使えない

起こったこと

コマンドを打ったところでエラーが出力される。

git-upgrade ERR! An error occurred during upgrade:
git-upgrade ERR! Error: Plugin 0 specified in "/Users/yuri/Documents/src/LinkSports/teamhub/node_modules/babel-preset-react-native/index.js" provided an invalid property of "default" (While processing preset: "/Users/yuri/Documents/src/LinkSports/teamhub/node_modules/babel-preset-react-native/index.js")
それに対し行なったこと(またそれを行なった理由)

react-native-git-upgradeコマンドが起こすエラーについてはいくつかissueが立ってはいるがreact-native-git-upgradeコマンドが失敗する理由とその解消法について言及するものは見当たらなかった。

しかしchangelogの中にUpdating to this versionという項目があり、こちらではreact-native-git-upgradeコマンドを使わない方法でのアップデート方法が記載されていた。

公式ドキュメントではreact-native-git-upgradeを使ったアップデート方法が記載されており、どちらが正しいか判断できなかったがうまくいく方でやればいいかと考えchangelogのUpdating to this version方法に切り替えた。


具体的に実施したのは下記の通り
・package.jsonのreact-nativeとreactのバージョンをそれぞれ^0.57.0と16.5.0に書き換える
(この時react-domは基本reactとバージョンをあわせた方が良いというアドバイスをもらったのでreact-domも16.5.0に書き換えた。)
・babel-preset-react-nativeを削除し、代わりに"metro-react-native-babel-preset": "^0.45.0"を追記
・.babelrcのpresetsを下記の通り修正

{
    "presets": ["module:metro-react-native-babel-preset"]
}

・@babel/coreを7.0.0に変更
・yarnをinstallし、yarnを実行

react / react-dom 16.5.2

起こったこと

react と react-dom のバージョンを16.5.2でビルドするとJSのビルドで下記エラーを出力

error: bundling failed: Error: Unable to resolve module `schedule/tracking` from `/Users/yuri/Documents/src/LinkSports/teamhub/node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js`: Module `schedule/tracking` does not exist in the Haste module map
それに対し行なったこと(またそれを行なった理由)

react と react-dom のバージョンを16.5.0に下げたら解消
エラーをぐぐったら16.5.1で解消したという投稿がったので16.5.1に落としてみた。
bundling failed: Error: Unable to resolve module `schedule/tracking` · Issue #21140 · facebook/react-native · GitHub
しかしこれでも同じエラーが出た。
さらに16.5.0に下げたら起こらなかったので深掘りせず16.5.0のバージョンを固定で使うことで落ち着いた。





今回はRN本体のアップデート自体とは関係ないがアップデート作業で得た知見もまとめる。



raect-native-twitter-signin

いいかげんこのライブラリの開発者には少しオコだ。

起こったこと

パッケージャーを起動し、BUNDLE中に下記エラーが出力

error: bundling failed: Error: jest-haste-map: @providesModule naming collision:
  Duplicate module name: react-native
それに対し行なったこと(またそれを行なった理由)

raect-native-twitter-signinのpackage.jsonにてDependenciesに今回アップデートした0.57.0とは異なるバージョンのreact-nativeを使用していた。
これによりreact-nativeが複数存在してしまいエラーを起こしていた。

package.jsonのDependenciesの理解についてはこちらの記事が参考になった。
ちゃんと使い分けてる? dependenciesいろいろ。
package.jsonのpeerDependenciesについての理解 - Flicker's Style++

プラグインモジュールではdevDependenciesに使用するモジュールを記載してくれれば親アプリでnpm installした時にdevDependenciesに記載されているモジュールはinstallされないので親アプリと重複してしまうことはない。

結果チームのメンバーにraect-native-twitter-signinをforkしてもらい、Dependenciesを空に修正した上でそちらのモジュールを使用するようにすることで問題を解消できた

react-native-pdf

起こったこと

react-native-pdfのバージョンを5.0.1から5.0.5にあげるとXcodeのビルドで存在するはずのファイルを参照してなぜかそんなファイルないよと参照エラー

それに対し行なったこと(またそれを行なった理由)

pod installをした際にこの差分が気になっていた。
react-native-pdf直下に記載されていたReactの記述がなくなっている。
f:id:yuri_iOS:20180921123918p:plain

Xcodeを見るとPods配下のDevelopment Podsフォルダ配下にあるreact-native-pdfが同じDevelopment Podsフォルダ直下のReactのファイルを参照しようとしてエラーが起きていた。
f:id:yuri_iOS:20180921132940p:plain

devDependenciesでreact-native-pdfがreactのバージョンを指定して使用していたのかと思っていたがpackege.jsonの履歴を見ても特に変更なく、結果原因はわからなかった。

最終的に元使っていたバージョンに戻すことで解消した。