Reactでのコンポーネント分割の際の読み込みエラーを解決

はじめに

UdemyでReactを学習していて、コンポーネント分割をした際にエラーが発生したためその解決方法を備忘録として残します！

発生したエラー

[plugin:vite:import-analysis] 
Failed to parse source for import analysis because the content contains invalid JS syntax. 
If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

原因

日本語訳すると「コンテンツに無効な JS 構文が含まれているため、インポート分析のためのソースの解析に失敗しました。 JSX を使用している場合は、ファイル名に必ず .jsx または .tsx 拡張子を付けてください。」です。
生成したファイルの拡張子が "App.js" だったため上記のエラーが起きていました！

解決

ファイルの拡張子を「App.jsx」に変更するとエラーが解消されて、無事に表示されるようになりました！
エラー文様々ですね！