普段思ったことや、雑記。

Menu & Search

React Nativeでファイルの拡張子に「.jsx」を使用していたら、UnableToResolveErrorが出て困った

2017年11月11日

※この記事は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よりハードトランスでしょ。

Related article

Redux(react-redux)における適切な配列要素の更新

2021年8月23日…

CloudFlareの『SSL/TLS 暗号化モード(HTTPS通信設定)』を使用したとき、『ERR SSL VERSION OR CIPHER MISMATCH』のエラーでChromeで発生し、接続できない場合の対処

英語の記事は見当たっ…

Dart(Flutter)についての所見

Dart(Flutter)についての所見

第一印象では、クロス…

Discussion about this post

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Type your search keyword, and press enter to search