monorepo内のReact Nativeのバージョンをアップグレードするのに苦労した話

概要

とあるプロジェクトで使っているReact-Nativeで作成されたアプリにて、React-Nativeのバージョンを0.55.4から0.57.1に変更する中で詰まった事について書く。

なお、当プロジェクトはlernaを用いたmonorepoを活用しており、React-nativeのプロジェクトはそのmonorepoの一つである。

react-native initで作成されたプロジェクトの為、Expoは使用していない。

React Nativeのバージョンが上がる際の変更点

React Nativeのバージョンが上がると、主に以下の変更が行われる。
太字が今回の変更で特徴的だった箇所である。

• build.gradleやinfo.plistなど、各ネイティブアプリのビルドに必要なファイルの変更
• react等の使用しているdependenciesのバージョンの変更
• RN0.56.0にてBabelのバージョンが6から7に変更
• RN0.57.0にて、rn-cli.configで使用されるmetro bundlerの書き方が変更

各変更に対してどの様なアプローチをとったかを記載する。

build.gradle等の変更

React-nativeのバージョン上げで変更されたファイルを楽に変更する手段として
react-native-git-upgradeが存在する。

しかし！

monorepo上で他のmonorepoのpackagesに依存している場合、失敗してしまう。
(2018/12/10現在、別の理由でRN57以降では使用できない)

なので、rn-diff-purgeというレポジトリ上で記載されている各アップグレードの差分をみて手動でファイルの変更を加えていた。

info.plist等、手動で変えていくには辛いものがあったが作業自体は時間がかかるのみで難しくはなかった

react等のdependencyの更新

package.jsonを更新してlerna bootstrapでpackageの更新を行った

Babelのバージョンを6から7に変更

Babel6から7への変更でpackage名に大幅な変更が加わった

babel-coreから@babel/coreへの変更や、
babel-preset-envから@babel/preset-envへの変更である

また、Babel7になるにあたってpreset-stage-系列が廃止されたので、必要なpluginを探して取ってくる必要があった。

加えて、RN0.57ではreact-native用のpresetの名前がreact-native-presetからmetro-react-native-babel-presetへ変更された。

rn-cli.configのフォーマットが変更された

monorepoでreact-nativeを使っていて、packages内に他にreact-nativeへ依存しているpackageがある場合metro bundlerでエラーが発生してしまう。
そのため、rn-cli.configにて重複するreact-nativeをblacklistに入れるようmetro bundlerを設定する必要がある。

その他、react-nativeでtypescriptを使用する際にもこの設定が必要となる。

RN0.57から、このrn-cli.configの書き方が変更された。
設定方法はmetroの公式サイトに記載されている。

また、RN0.57が使っているmetroはblacklistへのパスが少し変更されている。
だが、あまりドキュメントが豊富とは言えないので、trial and errorで試していく必要があった。

rn-cli.config.js

const blacklist = require('metro-config/src/defaults/blacklist')

metro-with-symlinksというrn-cli.config生成用のツールがある事をあとになって知った。使ってはいない。

まとめ

react-nativeのprojectをmonorepoで管理していると、monorepo特有の詰まり方等があって少し苦労した。

最後に

　本記事は We Are JavaScripters!【執筆初心者歓迎】 Advent Calendar 2018 (https://adventar.org/calendars/2972) の 12/10 担当分の記事です。

WeJS2周年おめでとうございます！