Solve - Unexpected end of input Error in JavaScript

avatar

Borislav Hadzhiev

Tue Oct 19 20213 min read

Solve - Uncaught SyntaxError Unexpected end of input #

The "Uncaught SyntaxError Unexpected end of input" error occurs for 3 main reasons:

  1. Forgetting a closing parenthesis, bracket or quote.
  2. Trying to parse an empty response with JSON.parse() or $.parseJSON.
  3. Getting a text/html response or no response at all from a server and trying to parse it as JSON.

uncaught syntaxerror unexpected end of input

The most common cause of the error is forgetting a closing parenthesis, bracket or quote.

index.js
// โ›”๏ธ Uncaught SyntaxError: Unexpected end of input function sum(a, b) { return a + b; // ๐Ÿ‘†๏ธ forgot closing curly brace if (true) { // ๐Ÿ‘†๏ธ forgot closing curly brace const arr = ['a', 'b' // ๐Ÿ‘ˆ๏ธ forgot closing square bracket const obj = {name: 'Tom' // ๐Ÿ‘ˆ๏ธ forgot closing curly brace

We forgot the closing curly brace of the function and if statement, which caused the error.

Make sure that your code is formatted properly and you see no typos that would cause a syntax error.

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

Open the console in your browser's developer tools to see on which line the error is thrown.

browser console line of error

The error message shows that the SyntaxError was thrown on line 4 in the index.js file. In my experience this information is not accurate 100% of the time, but it sometimes helps.

The "Uncaught SyntaxError Unexpected end of input" also occurs if you try to parse an empty response from your server or an empty string using the JSON.parse() method.

index.js
// โ›”๏ธ Uncaught SyntaxError: Unexpected end of JSON input console.log(JSON.parse('')); console.log($.parseJSON(''));
We parsed an empty string and got the error. This can also happen if your server sends an empty response and you attempt to parse the result with JSON.parse.

To make sure you handle this scenario, you can:

  • wrap your parsing logic in a try/catch block
  • make sure to return a valid JSON response from your server
  • remove the parsing logic from your code if you are expecting an empty server response

You can inspect the response of your server by opening your developer tools and clicking on your Network tab. If you click on the Response tab you will see the server's response.

browser network tab response

Here's an example of how to use a try/catch block to avoid the "Unexpected end of input" error when parsing.

index.js
try { const result = JSON.parse(''); console.log(result); } catch (err) { // ๐Ÿ‘‡๏ธ SyntaxError: Unexpected end of JSON input console.log('error', err); }

If the JSON.parse function throws an error due to parsing invalid JSON, the error is passed as a parameter to the catch function where we can handle it.

Alternatively, you can remove the call to the JSON.parse function if you know the server's response does not contain valid JSON.

Conclusion #

To solve the "Uncaught SyntaxError Unexpected end of input" error:

  1. Add any missing closing parenthesis, bracket or quote.
  2. Don't try to parse an empty response with JSON.parse() or $.parseJSON.
  3. Make sure your server returns the correct response type, e.g. trying to parse invalid JSON causes the error.

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