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

Hiện tượng

  • 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.

Vị trí lỗi code Unexpected Token thể hiện trên Javascript Console

Ảnh minh hoạ xác định vị trí lỗi trên Javascript Console

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)

Ảnh minh hoạ trường hợp Javascript Console báo lỗi ở vị trí số 1 (vị trí đầu tiên) của file HTML

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.

Ảnh minh hoạ fix Javascript Statement đang bị lỗi

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.

Và chúng ta cũng đã đi qua mục cuối cùng trong bài hướng dẫn rồi. Nếu bạn có bất kỳ thắc mắc nào, hay không thực hiện được bước nào, hãy để lại bình luận bên dưới nhé. Nếu bạn cảm thấy bài viết hay và hữu ích, hãy để lại 1 like, share, đánh giá để ủng hộ đội ngũ biên tập của hoccode.org nhé!

Chúc các bạn thực hiện thành công!

Đăng ký để nhận được thông báo mỗi khi có bài viết mới!