Unexpected end of input Error in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Unexpected end of input Error in JavaScript #

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 the if statement, which caused the error.

Make sure that your code is formatted properly and that 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 server's response 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.
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.