Errors / JavaScript errors

Uncaught TypeError: Cannot read properties of undefined (reading '…')

A script used a piece of data that had not arrived, or does not exist, and stopped.

The part of the page that script drives stops working; in a React or Vue app it can blank the whole view.

Why it happens

• Data from an API or a CMS is missing a field, or has a different shape than the code expects (user.address.city when there is no address).
• The code reads data before it has loaded: a component renders once with nothing, before the fetch answers.
• A global another script should have set up (a library, a config object) is not there, because that script failed or loads later.
• An array index past the end: items[3].name when there are three items.

How to fix it

1. The property in brackets tells you what was being read; the thing before it is undefined. Follow the stack's first frame.
2. Use optional chaining and defaults where data can be missing: user?.address?.city ?? "".
3. Render a loading state until the data is there, instead of assuming it.
4. If it reads a global from another script, check that script loaded, and in which order.

Whose problem it is

Either the site's own code or a third party's, depending on where it comes from.

Often seen with

• Cannot read properties of nullA script looked for something on the page that was not there, and stopped.
• x is not definedA script used a name nobody declared, usually because another script it depends on did not load first.