Cannot read properties of undefined reading length ошибка

One of the most common errors we record, “Cannot read properties of undefined (reading ‘length’)”, turned up in our own logs recently while looking into an issue with Microsoft Edge and the Facebook sdk. Let’s dive into this error, what it means, and how to fix it.

Breaking down the Message

TypeError: Cannot read properties of undefined (reading 'length')

In older browsers, this might also be shown as:

Cannot read property 'length' of undefined

TypeError is a subset of JavaScript Error that is thrown when code attempts to do something that does not exist on the target object.

This message indicates that our code expects to have an object with a length property, but that object was not present. length is commonly used on string and array, but a custom object could also have this property.

This is a blocking error, and script execution will stop when this error occurs.

Understanding the Root Cause

This error can be thrown for a lot of reasons, as it is incredibly common to reference the length property of string or array during everyday development. For example, if we had a function that acts on a string argument, but is called without a string, we would see this error.

function foo(myString) {
  if (myString.length >= 10) {
    // do something
  }
}

foo(); // Whoops! TypeError

In our case, we were intercepting a call to fetch, and we had assumed the url property would be a string.

But, dear developer, it was not always a string. 🤦‍♂️.

We had some code like this that intercepted fetch requests and recorded some metadata if the request was correct. It looked something like this:

ourInterceptedFetch(options) {
  if (options.url.length <= 0) {
    // fail out
  }
}

We were doing appropriate defensive type checking to make sure that the options argument had a valid url property. Unfortunately, fetch also accepts options to be any object with a stringifier: an object with a toString method. Like this:

fetch({
  toString: function() {
    return `https://whatever.com/`;
  }
});

In this case, options.url is undefined, so when we try to check options.url.length, it blows up with our error, “Cannot read property ‘length’ of undefined”. Ugh.

While this may be valid, it is a bit weird, right? We thought so too.

How to Fix It

So how do we fix this and prevent it from happening again?

1. Understand why your object is undefined

First and foremost, you need to understand why this happened before you can fix it. You are probably not doing exactly the same thing we are, so the reason your object is undefined may be somewhat different. Consider:

• Are you relying on a network response to be a certain shape?
• Are you processing user-input?
• Is an external function or library calling into your code?

Or maybe its just a logical bug somewhere in your code.

2. Add Defensive Checking

Anytime you don’t completely control the input into your code, you need to be defensively checking that arguments have the correct shape. API response change, functions get updated, and users do terrible, terrible things.

For instance, if you have a fetch request that receives a JSON response with a foo string property, you might have a defensive check that looks like this:

fetch("https://example.com/api")
  .then(resp => {
    return resp.json();
  })
  .then(json => {
    if (!json || typeof json.foo != 'string') {
      // Record an error, the payload is not the expected shape.
    }
  });

3. Monitor Your Environment

You’ll need to make sure that the issue is really fixed and that the problem stops happening. Mistakes happen, APIs change, and users are unpredictable. Just because your application works today, doesn’t mean an error won’t be discovered tomorrow. Tracking when exceptional events happen to your users gives you the context to understand and fix bugs faster. Check out TrackJS Error Monitoring for the fastest and easiest way to get started.

The other answers are focusing on prop.items list but in your question you mention that you get the exception when trying to access the length of the places inside users.

You are getting the error message because some users may not have any places listed inside them, hence, no places list -> no length property.

To fix this, you need to check if the places list exists and then access its length:

placeCount={ user.places ? user.places.length : 0 }

Here, we use a ternary operator to check if user.places exists, then we use the length, else use zero.

Edit:
As pointed out by Phil in the comments below, you can also use coalescing operator, which is much cleaner, like this:

placeCount={ user.places?.length ?? 0 }

The syntax simply translates as if user.places has a value for length, then use that value, else use zero as a default value.