【React】コンポーネント分割の際に出たエラーについて

Udemyでの学習にて以下のようなエラーがコンポーネントを分割して読み込み際に出たのでその対策を記録しておきます。

発生したエラー

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拡張子をつけてください」ということをいっています。

分割するコンポーネントのファイル名をList.jsにしたことが問題でした。

解決

直しは簡単です
List.jsからList.jsxに拡張子を変更することでエラーが解消され問題なく動作しました。