Doctype html unexpected token: The “Uncaught SyntaxError: Unexpected token” error can occur for a variety of reasons, including:
- Using a
<script />
tag that leads to an HTML file rather than a JS file. - Receiving an HTML response from a server where JSON is expected,
- Having a
<script />
tag that leads to the wrong path. - When your code is missing or contains extra brackets, parenthesis, or commas.
- When you forgot to close the
<script />
tag.
Let us see some of the cases where the “Uncaught SyntaxError: Unexpected token” error Occurs
Cases where the “Uncaught SyntaxError: Unexpected token” error Occurs
Example1
Unexpected token js: Below is an example of an error: our script tag points to a html
file rather than a JS file.
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- Here script tag is pointing to an html file instead of JS file Hence Uncaught SyntaxError: Unexpected token '<' occurs--> <script src="index.html"></script> </body> </html>
NOTE:
Check that any script tag you use lead to a valid path, and try to rename all your files using just lowercase characters. If the file name contains uppercase letters or special characters, the error may occur.
Example2
Unexpected token doctype: The other common cause of the “Uncaught SyntaxError: Unexpected token” is when we forget to close a script tag.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- Here we forgot to close the script tag, hence Uncaught SyntaxError: Unexpected token '<' occurs --> <script console.log("Uncaught SyntaxError: Unexpected token '<'"); </script> </head> <body></body> </html>
- When attempting to parse JSON data, the error is also generated if you make an http request to a server and receive an HTML response.
- To solve this we can use console.log. The response you receive from your server and ensure it is a proper JSON string free of HTML tags.
- Alternatively, you can open your browser’s developer tools, navigate to the Network tab, and inspect the response.
Example3: index.js (Giving another extra curly brace)
// Create a function say multiply whict accepts two numbers // as arguments and returns the multiplication result function multiply(x, y) { // Multiply the above passed two numbers and return the result return x * y; }}
Output:
}} ^ SyntaxError: Unexpected token } at Module._compile (internal/modules/cjs/loader.js:723:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
Explanation:
Here we gave another extra curly brace, hence SyntaxError: Unexpected token } occured
These syntax errors are difficult to spot, but an useful tip is:
- If you receive the “Uncaught SyntaxError: Unexpected token ‘<‘” (ovserve the ‘<‘) error, you are most likely attempting to read HTML code that begins with ‘<‘.
- If your error message comprises a curly brace, parenthesis, comma, colon, etc., you most certainly have a SyntaxError, which occurs when your code has an additional or missing character.
Example4: index.js (Giving colons two times(::) instead of once(:))
// Create an object and store it in a variable const obj = { // Here we gave colons two times(::) instead of once(:) to separate the key-value pairs // so,the SyntaxError: Unexpected token : occurs Website:: "Btechgeeks", }
Output:
Website:: "Btechgeeks", ^ SyntaxError: Unexpected token : at Module._compile (internal/modules/cjs/loader.js:723:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
Explanation:
Here we gave colons two times(::) instead of once(:) to separate the key-value pairs so,the SyntaxError: Unexpected token : occurs
Example5: index.js (Giving an extra comma)
// Create an object and store it in a variable const obj = { // Here we gave an extra comma(,) // Hence the SyntaxError: Unexpected token occurs Website: "Btechgeeks",, }
Output:
Website: "Btechgeeks",, ^ SyntaxError: Unexpected token , at Module._compile (internal/modules/cjs/loader.js:723:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
Fixing the “Uncaught SyntaxError: Unexpected token” Error
To resolve the “Uncaught SyntaxError: Unexpected token” error, make the following changes:
- We should not have a
<script/>
tag that points to an HTML file, instead of a JS file. - Instead of requesting an HTML file from a server, you are requesting JSON.
- There is no
<script/>
tag pointing to an incorrect path. - There must be no missing or excessive brackets, parenthesis, or commas.
- Do not forget to close a
<script
tag.