Unexpected Token Error in React Router Component

React Router is a go-to routing library in the React ecosystem. React Router provides a declarative and easy API to handle navigation and add pages in the app. One of the most common errors developers face while working with front-end apps is the unexpected token error. It doesn't matter which framework you are using; you will stumble upon this error more frequently than you think.

Like other JavaScript libraries, React also has a built-in error page, which renders on the screen when there's a problem in your code. In this guide, you will learn what causes the unexpected token error to show up and also how to fix it.

In this section, you'll see why JavaScript throws the unexpected token error. Take a look at the example below.

In the above line of code, the random() method of the in-built Math object is invoked. It is a correct line and hence won't throw any errors.

Now, consider the following line.

Notice that now there is an extra ")" in the end. The JavaScript compiler won't be able to parse this line and throw an unexpected token error.

MDN defines the error as follows.

The JavaScript exceptions "unexpected token" occurs when a specific language construct was expected, but something else was provided. This might be a simple typo.

Fortunately for developers, such errors are highlighted by the linters in code editors, so developers can fix it even before the app runs in the browser.

There are instances when an error occurs during runtime. Take a look at the following scenario to React. As soon as the app starts, it shows the React error page saying "unexpected token '<'".

When you see this error, you start going through the code, to find the problematic line. But often, runtime errors are caused because of an external factor. Your code must be expecting JSON data to be returned from a backend service. Instead, it returns data in XML format, which cannot be parsed by the JavaScript compiler.

Another reason could be that the JavaScript file that is referenced in the HTML page does not exist on the server. This behavior depends on the server configuration of the app. Some servers return HTML responses to display HTTP errors.

But what if the first page renders fine, but consequent pages show the unexpected token error? In this case, the JavaScript path must be referenced relatively. When using relative paths, the browser tries to load the app relative to the current URL of the page. So for example, if the JavaScript file is loaded using ./app.js path, when the index page loads the browser sends a request to /app.js, which is successful. But when the user navigates to another page, the browser sends a request to /another-page/app.js, which is an incorrect path in the server.

Tracking down runtime errors can be a pain, especially when the dev tools aren't helping much. Hence, it is crucial to understand the code and logically find the bug.

You can use debugger statements to control the flow of execution and inspect variables in real time when the app is running. The networks tab is also an essential section of the dev tools, which lets you see all the outgoing requests and incoming responses in the browser. If you have any queries, feel free to ask at Codealphabet.