Reactコンポーネントがうまく読み込めず、何も表示されない問題を解決

はじめに

React初心者が動画教材で学ぶ際にブラウザ上でうまく表示されなかったので、投稿します。

環境

StackBlitz
react 19.2.3
react-dom 19.2.3

問題

以下のコードでAppコンポーネントの内容が表示されなかった。
ブラウザのコンソールを見ても net::ERR_ABORTED 404 (Not Found) としか表示されなかった。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

解決方法

ターミナルを見ると、下記のエラー文が表示されていました。

[vite] Internal server error: 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.

AppコンポーネントのファイルがApp.jsとなっていたことが原因でした。
App.jsxにファイル名を戻すと、コンポーネントの内容が表示されました。

おわりに

Reactを勉強したばかりなので、jsファイルを作成するとなると、.js拡張子をつけてしまいました。
StackBlitzの仕様(?)でエラー文が画面に表示されないことがあることも今後注意したいです。

参考

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