Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

React Native for Webの0.7が出て、導入しやすくなった

More than 1 year has passed since last update.

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を書く必要があります(このあたりは公式ドキュメントにも書いてあります)。

webpack.config.js
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のバージョンを上げようとするなら、思わぬトラブルを回避するためにも目を通した方がよいでしょう。


  1. 当時途方に暮れた私は、とりあえずの回避策として.flowconfigの[ignore]のところに.*/node_modules/react-native-web/.*と書いて、エラーを黙らせていました。 

nacam403
CureAppで色々やっているエンジニアリングマネージャーです。
https://cureapp.co.jp/engineers.html
cureapp
医学的エビデンスに基づいた医療機器プログラム『治療アプリ』を開発しています。
https://cureapp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away