Solve - Unexpected token Error in JavaScript

avatar

Borislav Hadzhiev

Tue Oct 19 20213 min read

banner

Photo by Biel Morro

Solve - Uncaught SyntaxError Unexpected token #

The "Uncaught SyntaxError: Unexpected token" error occurs for multiple reasons:

  1. Having a <script /> tag that points to an HTML file, instead of a JS file.
  2. Getting an HTML response from a server, where JSON is expected.
  3. Having a <script /> tag that points to an incorrect path.
  4. You are missing or have extra brackets, parenthesis or commas in your code.
  5. You have forgotten to close a <script tag.

uncaught syntaxerror unexpected token

Here's an example of the error, where our script tag points to an html file instead of a JS file.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- โ›”๏ธ Uncaught SyntaxError: Unexpected token '<' โ›”๏ธ --> <script src="index.html"></script> </body> </html>
Make sure that any script tag you use points to a valid path and try to rename all your files to lowercase letters only. Sometimes the error is caused if the file name contains uppercase letters or special characters.

Another common cause of the error is forgetting to close a script tag.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- ๐Ÿ‘‡๏ธ Forgot to close the script tag --> <script console.log("Uncaught SyntaxError: Unexpected token '<'"); </script> </head> <body></body> </html>

The error is also caused if you're making an http request to a server and getting back an HTML response, when you're trying to parse JSON data.

To solve this, you can console.log the response you're getting from your server and make sure it's a valid JSON string and does not contain any HTML tags.

Alternatively, you can open the developer tools of your browser, click on theNetwork tab and inspect the response.

The "Uncaught SyntaxError: Unexpected token" error also occurs if you have a missing or extra bracket, parenthesis or comma.

index.js
function sum(a, b) { return a + b; }}

There is an extra curly brace on the third line, which causes the "Uncaught SyntaxError: Unexpected token '}'" error.

unexpected token curly brace

You can paste your code into an online Syntax Validator. The validator should be able to tell you on which line the error occurs.

Alternatively, you can also open your browser's console and see the line number. It will look like index.js:4 - meaning the error occurred in the index.js file on line 4.

These syntax error are very tricky to find, but a general rule of thumb is:

  • if you are getting the "Uncaught SyntaxError: Unexpected token '<'" (notice the <) error, you are probably trying to read some HTML code that starts with <.
  • if your error message contains a curly brace, parenthesis, comma, colon, etc, you most likely have a SyntaxError, where you have an extra or missing character in your code.
The error message states that one character was expected, but another character was provided. This is commonly due to typos.

Here's another example.

index.js
// โ›”๏ธ Uncaught SyntaxError: Unexpected token ':' const obj = { name:: "Tom", }

We separated the key and value in the object with 2 colons instead of 1, which caused the error.

This could also occur if you have an extra comma.

index.js
// โ›”๏ธ Uncaught SyntaxError: Unexpected token ',' const obj = { name: 'Tom',, }

However the brackets and parenthesis are the most difficult SyntaxErrors to track down.

Conclusion #

To solve the "Uncaught SyntaxError: Unexpected token" error, make sure:

  1. You don't have a <script /> tag that points to an HTML file, instead of a JS file.
  2. You aren't requesting an HTML file from a server, instead of requesting JSON.
  3. You don't have a <script /> tag that points to an incorrect path.
  4. You don't have missing or extra brackets, parenthesis or commas in your code.
  5. You haven't forgotten to close a <script tag.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee