【エラー解決】GET http://localhost:5173/src/components/TaskList.js?t=1742020997344 net::ERR_ABORTED 404 (Not Found)

こちらのエラーを解決していこう。

   GET http://localhost:5173/src/components/TaskList.js?t=1742020997344 net::ERR_ABORTED 404 (Not Found)

これは、vite（ヴィート）がTaskList.jsを探しているが見つからないというエラー。

.tsxファイルの拡張子が.jsファイルとして解釈されている？

ViteはTypeScriptプロジェクトを使用していると、デフォルトでは.tsxを.jsに変換して扱う。

しかし、ファイルのインポート時に拡張子を指定しないと、正しく変換できない場合がある。

.tsxを明示したらDOMがレンダリングされた

app.tsxの一行目のインポートで拡張子を指定したら、

import TaskList from "./components/TaskList.tsx";

function App() {
  return (
    <div>
      <h1>タスク管理アプリ</h1>
      <TaskList/>
    </div>
  );
}

export default App

ターミナルでは以下の表示がされて、

画面は以下のようになった。

先ほどのエラーは解決したか？

   GET http://localhost:5173/src/components/TaskList.js?t=1742020997344 net::ERR_ABORTED 404 (Not Found)

上記エラーは解決した。しかし、別のエラーが発生している。

Error fetching tasks:AxiosError

ERR_NETWORKなので、サーバーが動作していない可能性が考えられる。

{
    "message": "Network Error",
    "name": "AxiosError",
    "stack": "AxiosError: Network Error\n    at XMLHttpRequest.handleError (http://localhost:5173/node_modules/.vite/deps/axios.js?v=c438f1eb:1580:14)\n    at Axios.request (http://localhost:5173/node_modules/.vite/deps/axios.js?v=c438f1eb:2108:41)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http",
            "fetch"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://127.0.0.1:8000/api/tasks/",
        "allowAbsoluteUrls": true
    },
    "code": "ERR_NETWORK"
}

djangoで作成したバックエンドAPIの開発サーバーを起動させた。

(venv) Mac:django_todo shibatahiroshitaka$ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
March 15, 2025 - 09:00:54
Django version 4.2.19, using settings 'django_todo.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Error fetching tasks:AxiosErrorは解決したが、新たなエラーに直面した。

新たに発生した3つのエラー

上記のエラーは3つに分けられる。

• CORS policyによってブロックされたというエラー
• タスクをフェッチできないというエラー（先ほど解決したはずだが、再発生）
• http://127.0.0.1:8000/api/tasks/にアクセスできないというエラー？

それぞれについては、別の記事で見ていこう。