※この記事はReact Native v0.51での出来事を記載しています。

React開発にESLintを使用していて、Airbnb社のルールを使用している人は要注意

最近の開発がReact(Web)で、Airbnb社のESLintのルールを適用していた。Airbnb社のESLintルールでは、標準でReactコンポーネントのJavaScriptファイルについて、拡張子を「.js」ではなく「.jsx」にすることが推奨されている。今回のReact Native開発でも、WebのReact開発より、引き続きAirbnb社のESLintルールを適用している。

React NativeがサポートするJavaScriptファイルの拡張子はあくまで「.js」であり、「.jsx」はサポートしない

結論は見出しの通りである。この問題に直面した時は、ちょうどプロジェクトの駆け出しだったので、インストールしたパッケージの依存関係を間違えたか…？と色々調べていて2時間くらいは困っていたと思う。

ESLintのチェックは通していたので、Linterを盲信し過ぎていた。Lintチェックは記法のいわば見た目上の問題であり、Airbnb社の決められたルールの記法をクリアしたとしても、肝心なReact Nativeのプラットフォーム側が対応していなければ、あくまでもソースコードのコンパイル処理はエラーとなる。今回の自分のように、最近までWebのReactで開発してきて、ついついReactコンポーネントのファイルの拡張子を「.jsx」にするなんてことをやると、React Nativeでは全く動かないので、注意を。

根本的な解決策としては、React Nativeプラットフォームの推奨設定(※2017年11月11日時点、React Native v0.51の環境)に従う方向でいくと、AirnbnbのESLintルールの「react/jsx-filename-extension」をオフにすることが最も適切だ。下記は該当の設定をオフにした場合の.eslintrcの記述例である。

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "react/jsx-filename-extension": off,
  },
}

参考文献

React Native UnableToResolveError
https://reformatcode.com/code/javascript/react-native-unabletoresolveerror

`.jsx` extension cannot be used with React Native · Issue #982 · airbnb/javascript
https://github.com/airbnb/javascript/issues/982

javascript/packages/eslint-config-airbnb at master · airbnb/javascript
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

mmiyauchi

プログラムを書きながらTranceを聴くのが良いですね。みなさんも聴いたほうがいいですよ、Trance。EDMよりハードトランスでしょ。

Previous Story

Udemyの講師ミートアップに行ってきた

Next Story

React NativeのHTTPリクエストにはfetchよりaxiosを使ったほうが安定しそう