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

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の記述例である。

 

参考文献

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

React Nativeで「No bundle url present」というエラーが出たときの対処

※この記事はReac…

React Native開発のつらい点まとめ

React Native開発のつらい点まとめ

React Nati…

Meteorのブームが来るか来ないと言われれば、来ないと思ってしまった件

2016年秋頃から、…

Discussion about this post

コメントを残す

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

Type your search keyword, and press enter to search
%d人のブロガーが「いいね」をつけました。