4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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/.*と書いて、エラーを黙らせていました。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?