1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

Reactでファイル拡張子を".js"から".jsx"にするとエラーが起きる(Error: ENOENT: no such file or directory, open '実行パス')

はじめに

こんにちは。Qiita3記事目です。
最近はよく起きるエラーの解決法備忘録集みたいになってきています…笑
今回もまたよく起きそうなエラーが発生したのでその解決策をまとめておきます。

Markdown記法にも少しずつ慣れてきました。

開発環境

  • エディタ:VSCode
  • OS:Mac OS X
  • node:v15.2.1
  • yarn:1.22.10
  • React:17.0.1
  • React-dom:17.0.1
  • React-script:4.0.1

結論(解決策)

そのプロジェクトフォルダ内のnode_modulesを削除し、yarn installしてパッケージをインストールし直す。
npmを使っている方はyarn installの部分をnpm installに。

$ rm -rf node_modules && yarn install

原因:拡張子を".js"から".jsx"にすると発生する

VSCodeでは拡張子に応じてファイルのアイコンを変更してくれる機能があります。
コンポーネントを記述したファイルは拡張子を.jsxにすることで、ファイルアイコンがReactのアイコンになり判別がしやすくなるということで早速変えてみたのですが、以下のようなエラーが出ました。

App.jsをApp.jsxに変更したあとのターミナル
./src/App.js
Error: ENOENT: no such file or directory, open '/Users/username/Desktop/programming/practice/js-react/jake-react/react-practice/src/App.js'

解決策

解決策としては、一度プロジェクトフォルダ内のnode_modulesを削除し、再度yarn installでパッケージをインストールし直すことによって解決しました。

$ rm -rf node_modules && yarn install

-rオプションは「ディレクトリを削除する」オプションで、-fオプションは「メッセージを表示しない(「本当に削除していいですか?」みたいなもの)」オプションになります。

懸念点

そんなに頻繁にやることではないと思うのでよいのですが、この拡張子の変更によるエラーは原因となる拡張子を変更する度に毎回起こるということを何回か実験して確認しました。

例としては、今回のような.jsから.jsxへの変更、逆に.jsxから.jsへの変更、また.jsxから.tsxへの変更など、これらの変更を行った段階で今回のエラーが発生します。

その度に今回の解決策のコマンドを実行すれば解決はするのですが、如何せん面倒臭いなあという気もします。

何かもっと良い解決策はないのでしょうかね。

今回参考にしたもの

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
Sign upLogin
1
Help us understand the problem. What are the problem?