JavaScriptで開発していると突然現れるエラー「Uncaught SyntaxError: Unexpected token '<'」に戸惑ったことはありませんか？これは意外と単純なリンクミスが原因で発生することが多いエラーです。
どんなエラー？
通常、Uncaught SyntaxError: Unexpected token エラーは、コード内で閉じタグや括弧の閉じ忘れなど、文法ミスがある場合に表示されます。しかし、'<' という文字が問題となる場合、少し異なる原因が考えられます。
「'<'って何？そんなタグ使ってないぞ？」と思ったら、次のポイントを確認しましょう。
主な原因
JavaScriptのリンクエラー
- 拡張子の抜け落ち：scriptタグで参照しているファイルの拡張子が抜けていると、ブラウザが正しく読み込めません。
- ファイル名の間違い ：小さなスペルミスも見逃さないように確認しましょう。
- パスの間違い：ファイルが指定したパスに存在しない場合、HTMLファイルが読み込まれてしまい、'<'が最初に現れるためエラーとなります。
全然別の理由
webpackの振る舞いなどでJavaScriptのリンクが正しくても起こり得るエラーです。
以上のような理由で
「Uncaught SyntaxError: Unexpected token '<'」
が吐かれます。
対処方法
- リンク先の確認： scriptタグのsrc属性を再確認。
- ブラウザの開発者ツールで確認：ネットワークタブでリソースが正しく読み込まれているか確認。
- ファイルの存在確認：サーバー上にファイルが正しい場所に配置されているか確認。
- baseタグの追加：webpack由来のエラーの場合はindex.htmlのheadタグ内に
<base href="/" />
を追加すると解決するそうです。
原因がなんとなくわかれば対処方法もおのずと見えてきますね！
まとめ
このエラーはシンプルなミスが原因のことが多いので、慌てずに一つずつ確認することが大切です。
うっかりミスをしがちな全ての開発者、そして未来の私自身への備忘録として、この記事を書きました。
楽しいJavaScriptライフを。
それではまた！さよならいち！・∀・)ノ
