chrome 111+ · JavaScript
メッセージ
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
何を意味するか
JSON.parse に渡したものが JSON ではなく HTML だったという意味です。文言に残る <!DOCTYPE の断片が証拠で、サーバが 404 や 502、ログインへのリダイレクトページを HTML で返したことを示します — つまり本当の誤りは解析ではなく、その前の要求にあります。URL が違う、開発サーバのプロキシが API ではなく index.html を返した、認証が切れてログイン画面へ飛ばされた、が典型です。res.json() を呼ぶ前に res.ok を見て、違えば res.text() で実際に何が来たかを読んでください — その URL を curl -s で直接叩くのが一番速いです。Chrome 111 と Node 20 より前は同じ誤りが Unexpected token < in JSON at position 0 と出ていました。
直しかた
curl -s https://api.example.com/data | head -5- 出す道具
- chrome 111+
- JavaScript
- 15
ブラウザと node の誤りは、たいてい何が壊れたかだけを告げ、なぜその値がそうなったかは告げません — undefined を読んだ、関数ではなかった、JSON ではなかった。ですから直す場所は投げた行ではなくその値を作った上流であり、?. や既定値でその行だけ黙らせると、同じ問題がもっと遠くで、もっと分かりにくい形で戻ってきます。
エラーメッセージの読み方
- 一行目から読みます。下に行くほど道具の内部の話で、原因はたいてい一番上に書かれています。
- ファイル名と行番号があればそこが出発点です — スタックの最上段ではなく、自分が書いたファイルが出てくる一番上の行です。
- 文句はそのまま検索します。ただし自分のパスや変数名は消します — その部分が検索を邪魔します。
- 同じ事情が道具の版ごとに違う言い方で出ます。結果が合わないときは版番号も入れてみます。
- 直す命令を貼る前に、その命令が何を捨てるかを確かめます。取り消せないものが混ざっています。
よくある質問
Q. SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON はどういう意味ですか。
JSON.parse に渡したものが JSON ではなく HTML だったという意味です。文言に残る <!DOCTYPE の断片が証拠で、サーバが 404 や 502、ログインへのリダイレクトページを HTML で返したことを示します — つまり本当の誤りは解析ではなく、その前の要求にあります。URL が違う、開発サーバのプロキシが API ではなく index.html を返した、認証が切れてログイン画面へ飛ばされた、が典型です。res.json() を呼ぶ前に res.ok を見て、違えば res.text() で実際に何が来たかを読んでください — その URL を curl -s で直接叩くのが一番速いです。Chrome 111 と Node 20 より前は同じ誤りが Unexpected token < in JSON at position 0 と出ていました。
Q. どう直しますか。
curl -s https://api.example.com/data | head -5 — 実行する前に、この命令が何を捨てるかを上の説明で確かめてください。
Q. どの道具が出すエラーですか。
chrome 111+ です。JavaScriptの仲間で、文句は10語です。