はじめに
こんにちは。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のアイコンになり判別がしやすくなるということで早速変えてみたのですが、以下のようなエラーが出ました。
./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への変更など、これらの変更を行った段階で今回のエラーが発生します。
その度に今回の解決策のコマンドを実行すれば解決はするのですが、如何せん面倒臭いなあという気もします。
何かもっと良い解決策はないのでしょうかね。