Hướng dẫn Fix lỗi Uncaught SyntaxError: Unexpected token ‘<'

• Kịch bản Javascript trên trang HTML không hoạt động hoặc bị ngắt quãng giữa chừng
• Javascript Console báo lỗi: Uncaught SyntaxError: Unexpected token ‘<‘.

Ảnh chụp Javascript Console báo lỗi Uncaught SyntaxError: Unexpected token ‘<‘.

Nguyên nhân

1. Nguyên nhân phổ biến nhất là do lỗi cú pháp trong 1 Statement (câu lệnh) Javascript nào đó với < là ký tự bắt đầu. Ví dụ:
          var a = 1 + 2 ; 
   < // <-- Lỗi
   var tween = gsap.to("#play", {
      duration: 4,
      x: 750,
      rotation: 360,
      ease: "none",
      paused: true
   });
2. Khai báo External Javascript nhưng giá trị src của <script></script> là URL lại lại dẫn đến 1 file KHÔNG PHẢI là Javascript (HTML, CSS, Ảnh, Video…).
   Ví dụ: <script type="text/javascript" src="/about.html"></script>
3. File External Javascript chứa ngôn ngữ HTML. Ví dụ source code của scripts.js
...
var a = document.getElementById("result");
<a></a> // <-- Lỗi
console.log(a);
...
4. Bên trong Internal Javascript chứa ngôn ngữ HTML. Ví dụ:
   <script>
    ....
    <div></div> // <-- Lỗi
    ...
</script>

Cách khắc phục (Fix)

Bước 1: Xác định đúng nguyên nhân và vị trí xảy ra lỗi

Hầu hết, vị trí lỗi code Javascript đều được thể hiện trên Javascript Console của trình duyệt ở dạng đường link bên góc phải của dòng error log. Bạn có thể click vào đường link này → Developer Tool sẽ tự động chuyển sang Tab source và chỉ rõ vị trí Statement lỗi.

Trong trường hợp Javascript Console báo lỗi ở vị trí số 1 (vị trí đầu tiên) của file HTML, nghĩa là bạn khai báo External Javascript nhưng giá trị src của <script></script> là URL lại lại dẫn đến 1 file KHÔNG PHẢI là Javascript (HTML, CSS, Ảnh, Video…) (Nguyên nhân số 2 mà mình đã giải thích bên trên)

Bước 2: Tiến hành fix lỗi

Sau khi bạn đã xác định được vị trí Statement đang bị lỗi, hãy mở Source HTML (đối với lỗi trong Internal Javascript) hoặc Source Javascript (đôi với lỗi trong External Javascript) để sửa lại Statement đó cho đúng cú pháp.

Nếu lỗi đến từ nguyên nhân số (2), bạn hãy kiểm tra lại URL của file External Javascript và thay bằng 1 URL dẫn đến đúng file Javascript mà bạn đang cần.