2018/05/18に、React Native for Webの0.7.0がリリースされました。
https://github.com/necolas/react-native-web/releases/tag/0.7.0
(その直後、軽微な修正によるアップデートがちょこちょこ出ています)
これからReact Native for Web(以下、RN Web)を使い始める人にとっては、地味にありがたいアップデートのようです。
Babelプラグインが不要になった
これまでRN Webを使うためには、RN Web用のBabelプラグイン(babel-plugin-react-native-web)を使う必要がありました。これについては以前の記事も参照ください。
ところが0.7.0のリリースノートによると「Babel plugin is legacy.」とのことで、Babelプラグインは必須ではなくなりました。公式ドキュメントのInstallの節においても、yarn add --dev babel-plugin-react-native-web
という手順が削除されています。
とはいえ、JavaScriptコードに書くimportの行において、fromをreact-nativeからreact-native-webに変換する必要があることは変わりません。よってBabelプラグインの代わりに、以下の様にWebpackの設定としてalias
を書く必要があります(このあたりは公式ドキュメントにも書いてあります)。
module.exports = {
// (前略)もろもろの設定
resolve: {
alias: {
'react-native': 'react-native-web'
}
}
}
なお既にBableプラグインを使っているなら、今まで通り使い続けても構いません。
flowとの併用がしやすくなった
これまでにRN Webを使いつつ、flowで型チェックをしようと人ならしばしば経験したであろうエラーが解消しました。
今までは、RNとRN Webをインストールしたプロジェクトに対し、何気なくflowもインストールして実行してみると、以下の様なエラーが大量に出ることがありました。
Error: node_modules/react-native/Libraries/Animated/src/nodes/AnimatedModulo.js:0
AnimatedModulo. Duplicate module provider
current provider. See: node_modules/react-native-web/dist/vendor/Animated/nodes/AnimatedModulo.js:0
RNとRN Webとで同名のモジュールが検出されているようで(?)、何やらflowに怒られまくります。1
RN Webのバージョンを0.7.xに上げると、このエラーが解消します。
どうやらエラーの原因は@providesModule
というflow独自のJsDocタグに関係していたようで、以下のコミットにおいて削除されていました。
https://github.com/necolas/react-native-web/commit/18933724d65c146fbcf6d21bff00beced48843e4
見たところRNの方も、2018/04/25に削除されていました。
https://github.com/facebook/react-native/commit/d5e9e55fa38c574bce6c04cbcaf6b144b87fa17f
今までは両者のソースコードに@providesModule
が含まれていたことから、別々のパッケージに含まれているモジュールにも関わらず、flowによって同一視・重複扱いされたのではないでしょうか。ともあれ直った!
Getting startedのドキュメントが結構改訂された
先述のBabelプラグインに関することでだけでなく、公式ドキュメントのGetting startedがあちこち改訂されており、どうやってRN Webを使い始めるかが分かりやすくなっている印象があります。
既にRN Webを使っている人も、一度見直してはいかがでしょうか。
特に、これからRN Webのバージョンを上げようとするなら、思わぬトラブルを回避するためにも目を通した方がよいでしょう。
-
当時途方に暮れた私は、とりあえずの回避策として.flowconfigの
[ignore]
のところに.*/node_modules/react-native-web/.*
と書いて、エラーを黙らせていました。 ↩