Solve - SyntaxError: Unexpected token in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Solve - SyntaxError: Unexpected token in JavaScript #

The "Uncaught SyntaxError: Unexpected token" 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. Having missing or extra brackets, parenthesis or commas in your code.
  5. Forgetting to close a script tag.

uncaught syntaxerror unexpected token

Here's an example of how the error is caused, when 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 your script tags point to a valid path and try renaming 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 resolve this, 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.

You can also 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
// ⛔️ SyntaxError: Unexpected token '}' function sum(a, b) { return a + b; }}
There is an extra curly brace on the third line, which causes the 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 something like index.js:4. This means that 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 a "Uncaught SyntaxError: Unexpected token '<'" (notice the <), 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 a missing character in your code.
The error message means 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.

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.
Use the search field on my Home Page to filter through my more than 3,000 articles.