Resolving the JavaScript Promise Error "TypeError: Cannot Read 'Then' of Undefined"
May 22, 2020 • 5 Minute Read
Introduction
Working with JavaScript Promise comes with its own array of errors, and a popular one is
TypeError: Cannot read property 'then' of undefined.
In this guide, we will cover two code examples containing a bugs that cause this TypeError and then refactor the code to resolve the issue.
Example 1
Say you have the function getTaxAmount(price, taxRate). It takes two arguments, price and taxRate, calculates the amount of tax using the inputs, and is expected to return a Promise that resolves to the calculated tax amount.
Next, call getTaxAmount() function with two arguments and log the returned value on the console.
const getTaxAmount = (price, taxRate) => {
Math.floor((price * taxRate) / 100);
};
getTaxAmount(100, 12).then((taxAmount) => console.log(taxAmount));
If you run this buggy code on your browser console or using Node CLI, you will get this error:
TypeError: Cannot read property 'then' of undefined
Example 2
Here's another example. getGithubOrgs(url) is a function that takes a URL and uses Fetch API to get GitHub organization data for a given user(deekshasharma). fetch() makes a network request to the destination URL and returns a Promise that resolves to a response object. The response is then parsed into a JSON. This function is expected to return a Promise that should resolve to JSON data.
The getGithubOrgs() function is then called with an argument containing a valid URL and logs the resulting JSON on the console.
function getGithubOrgs(url) {
fetch(url).then((response) => response.json());
}
getGithubOrgs(
"https://api.github.com/users/deekshasharma/orgs"
).then((jsonData) => console.log(jsonData));
When you run this code in the browser console, you will get an error:
TypeError: Cannot read property 'then' of undefined
What Causes This TypeError
TypeError - Cannot read property 'then' of undefined is thrown when the caller is expecting a Promise to be returned and instead receives undefined. Let's consider the above examples.
In Example 1, the getTaxAmount(price, taxRate) function, when called, should have returned a Promise that resolves to a value of 12. Currently this function simply calculates the tax amount using the two inputs and does not return a value. Hence, the undefined value is returned.
In Example 2, the getGithubOrgs(url) function calls the Fetch API, which returns a Promise that resolves to a response object. This resulting Promise is received by the then() method, which parses the response to JSON using the json() method. Finally, then() returns a new Promise that resolves to JSON. But you may have noticed there is no return statement inside the getGithubOrgs(url) function, which means the resulting Promise from the then() method is never returned to the calling code.
How to Fix This Error
To resolve the issue in both code examples, you'll need to refactor the functions. Let's look at them one by one.
Example 1
The function getTaxAmount() should be refactored to the code below.
Promise.resolve() returns a resolved Promise with the value of the tax amount calculated by the function. So the calling code will always receive a Promise as long as valid arguments were passed.
const getTaxAmount = (price, taxRate) => {
return Promise.resolve(Math.floor((price * taxRate) / 100));
};
getTaxAmount(100, 12).then((taxAmount) => console.log(taxAmount));
Run this code on your browser console or Node CLI, and you should get an ouput of 12.
Example 2
The function getGithubOrgs(url) should be refactored to include a return statement so that a Promise can be returned to the caller.
function getGithubOrgs(url) {
return fetch(url).then((response) => response.json());
}
getGithubOrgs("https://api.github.com/users/deekshasharma/orgs").then((res) =>
console.log(res)
);
Conclusion
Whenever you see this TypeError while working with JavaScript Promise, the first step is to inspect the code that was expected to return a Promise. After all, you get this error when calling the then() method on a Promise. And the TypeError indicates you are calling then() on undefined, which is a hint that the Promise itself is undefined. The next step is to go and debug the code to figure out why a Promise is not returned. We looked at two different code examples to see what can potentially cause this error and how to resolve it.
You can read more about Promise.then() on MDN.
Learn More
Explore these Javascript course from Pluralsight to continue learning:
