PHP

【Laravel】viewでUncaught SyntaxError: Unexpected token <が発生したときの解決方法!

【Laravel】viewでUncaught SyntaxError: Unexpected token <が発生したときの解決方法!

 

誠太
こんにちは、誠太です。

 

本日開発をしている中で、解決するのに苦労したエラーがあったので、その解決方法を紹介しようと思います。

 

エラー内容は『Uncaught SyntaxError: Unexpected token <』

 

ローカル環境の中では問題なかったのに、本番環境にリリースをしてからエラーが発生しました。

 

4時間ほど悩んでいたのですが、解決方法はあっさりだったのですぐに解決出来るかと思います。

 

ポイント

原因はJavaScriptのパス指定の仕方がエラーを引き起こしていました。

 

【Laravel】viewでUncaught SyntaxError: Unexpected token <が発生したときの解決方法!

【Laravel】viewでUncaught SyntaxError: Unexpected token <が発生したときの解決方法!

 

エラー内容をそのまま調べてみたところ、JavaScriptの内容と指定されているパスの読み込みが上手く行っていないことが原因になっている可能性が見えてきました。

 

しかし、具体的な解説方法を紹介しているページが存在しておらず、Laravelで発生した場合の解決方法を書き留めておきたいと思います。

 

エラーが起きているJavaScriptのソースをテキストエディタで確認

エラーが起きているJavaScriptのソースをテキストエディタで確認

 

Googleの検証で原因となっている部分のJavaScriptが上記の画像のように表示されているかと思います。

 

この表示されているJavaScriptですが、親ビューに指定しているJavaScriptのsrcと一致していることに気が付きました。

 

指定方法を確認してみると、通常のsrc指定の方法になっていて、この部分が引っかかっていたようです。

 

検証のSourcesで各JavaScriptのリンクをクリック

先程の画像ではモザイクをかけていますが、エラーとなっているJavaScriptのファイル名がクリックできるリンク形式になっていると思います。

 

その部分をクリックすることで、エラーとなっている部分のソースコードが赤×で表示されているはずです。

 

ちなみに、今回試しに検証の画面の中でソースコードを1行ずつ削除していってエラーが解消される行があれば、その部分を解消すれば良かったのですが、残念なことに解消される部分はありませんでした。

 

<!DOCTYPE html>
<html lang="ja">

 

注意ポイント

恐らく上記の部分でエラーが発生している可能性が高いと思いますが、DOCTYPE指定の部分が原因となっているわけではないので注意してくださいね!

 

Viewの親テンプレートのJavaScriptの指定を{{ asset('example.js') }}に変更

実際にパス指定を変更する前と後では下記のように変化しています。

 

//変更前のJavaScript指定
  <script type="text/javascript" src="js/example.js"></script>
  <script type="text/javascript" src="js/example.min.js"></script>
  <script src="js/app.js" defer></script>

//変更後のJavaScript指定
  <script type="text/javascript" src="{{ asset('/js/example.js') }}"></script>
  <script type="text/javascript" src="{{ asset('/js/example.min.js') }}"></script>
  <script src="{{ asset('/js/app.js') }}" defer></script>

 

ちなみにこの{{ asset('example.js or example.css') }}はプロジェクトフォルダ直下にある、publicの中身にアクセスするためのヘルパー関数となっています。

 

{{ asset('○○') }}と"〇〇"の中身に、css,jsのパスを指定して上記のサンプルコードのように記述すれば、viewの中に正常な形で読み込ませることが可能です。

 

今回原因となっていたのは、本来Laravelの仕様でassetヘルパーを使用しなければいけないのに、使っていなかったことが原因となっていました。

 

誠太
まだまだ、開発に慣れていないとはいえこのような凡ミスと犯してしまうとは・・・

(しかもCSSではassetを普通に使ってた・・・(笑))

 

まだまだ修行足らずなので、引き続きエラーと戦いながら開発を進めていきたいと思います!

 

Uncaught SyntaxError: Unexpected token <に惑わせられないように注意!

Uncaught SyntaxError: Unexpected token <に惑わせられないように注意!

 

今回は、Uncaught SyntaxError: Unexpected token <エラーについての解決方法を解説しました。

 

原因となっているのはJavaScriptだということが分かったのですが、パスの指定なのか内容が間違っているのかというピンポイントの解決策が見当たらなかったので、Laravelで開発している方の参考になれば幸いです。

 

実際にJavaScriptファイルのソースコードを確認しても、原因となっている箇所の部分にコードを打ち込んでいる訳ではなく、Viewのソースコードの行番号だったり、検証しているViewとは関係のないViewが表示されていたりと、混乱しまくりでしたが何とか解決することができました。

 

エラーとの戦いはプログラマー・エンジニアの宿命だと思うので、今後もめげずにエラーと戦っていく所存です。

 

あなたも、諦めずにエラーと戦いつつ開発を進めていってくださいね!

 

オススメ記事【Udemyが強い!】Web制作を独学で学べる講座はひとつあれば事足りそう

オススメ記事プログラミングの本は学習に必要だけど、本だけではキツいというお話【体験談】

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  誠太こんにちは、誠太です。   WordPressのテーマは多数存在していますが、今回はその中でも人気なWordPressテーマ『The THOR(ザ・トール)』についてレビュ ...

5

  誠太こんにちは、誠太です。   WordPressのテーマはいまや沢山の種類がリリースされ、個人制作のものや企業がリリースしているものまで溢れかえるようになりました。 &nbs ...

-PHP
-

Copyright© SEITALITY , 2020 All Rights Reserved.