【エラー解決】Parsing error: Unexpected token <

はじめに

以下のjsでeslintのエラーが発生していた。

import { useState, useEffect } from "react";
import axios from "axios";

const API_URL = "http://127.0.0.1:8000/api/tasks/";

const TaskList = () => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    axios.get(API_URL)
      .then(response => setTasks(response.data))
      .catch(error => console.error("Error fetching tasks:", error));
  }, []);

  return (
    <div>
      <h2>タスク一覧</h2>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;

こちらを解決していこう。

エラー内容

「Parsing error: Unexpected token <」というエラー。

TaskList.jsの16行目で発生している。

API_URLで指定したエンドポイントがJSONを返しているか

以下のURLがJSONを返しているかどうかを確認する。

const API_URL = "http://127.0.0.1:8000/api/tasks/";

HTMLを返していると、JSXの解析中に<が予期せぬトークンとして認識されるらしい。

「curl -i http://127.0.0.1:8000/api/tasks/」でAPIのレスポンスを確認してみると、サーバーに接続できないと返答があった。

Mac:react_todo shibatahiroshitaka$ curl -i http://127.0.0.1:8000/api/tasks/
curl: (7) Failed to connect to 127.0.0.1 port 8000 after 11 ms: Couldn't connect to server

Djangoで作成したバックエンドAPIのサーバーを起動する

127.0.0.1 port 8000に接続できないとのことなので、それを起動してみよう。

ターミナルでdjango_todoに移動して、python manage.py runserverを実行した。

(venv) Mac:django_todo shibatahiroshitaka$ ls
db.sqlite3      django_todo     manage.py       myapp
(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 - 00:30:34
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.

これで、127.0.0.1 port 8000に接続できた。

API_URLで指定したエンドポイントはJSONを返していた

Mac:react_todo shibatahiroshitaka$ curl -i http://127.0.0.1:8000/api/tasks/
HTTP/1.1 200 OK
Date: Sat, 15 Mar 2025 00:36:39 GMT
Server: WSGIServer/0.2 CPython/3.8.9
Content-Type: application/json
Vary: Accept, origin, Cookie
Allow: GET, POST, HEAD, OPTIONS
X-Frame-Options: DENY
Content-Length: 210
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Cross-Origin-Opener-Policy: same-origin

[{"id":1,"title":"Django REST API作成","description":"最初のタスク","completed":false},{"id":2,"title":"買い物","description":"バローで今日の夕食の材料を購入する","completed":false}]

Reactのバンドラーが.jsファイルではなくHTMLを解釈しようとしているという可能性

Reactが期待しているJavaScriptではなく、HTMLを取得してしまっている可能性がある。

package.jsonにproxyを設定しても結果は変わらなかった。

,
  "proxy": "http://127.0.0.1:8000"

TaskList.jsが残っていたのが原因

npm run devで起動した開発環境にアクセスしたときに、以下のエラー画面が表示されていたが、

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.

おそらく原因は、TaskList.jsが残っていたから。