Uncaught TypeError: Cannot read properties of undefined — explained and fixed

This error means JavaScript tried to read a property (the word in quotes at the end) off a value that is undefined — the code expected an object and got nothing. It is the single most common runtime error in web development, and it is always the same detective story: which value was undefined, and why wasn't it there when the code ran?

How to find it

  1. Read the end of the message. (reading 'name') tells you the property being accessed — the code did something like user.name where user was undefined.
  2. Click the top line of the stack trace in the browser console or your editor's debugger — it lands on the exact expression. Hover or log the base value (the thing before the dot).
  3. Log just before the line: console.log('user =', user) — then ask where that value was supposed to come from: an API response, a function argument, a lookup in an array, a piece of state.

The usual causes, most common first

  1. Data hasn't arrived yet. The code rendered or ran before the fetch finished — the object is undefined on first pass, populated later. The fix is a loading state or initialising the value (useState(null) + a guard), not a faster network.
  2. An API returned a different shape than expected — data.results when the response is data.items, or an error response where data was assumed. Log the actual response.
  3. Array lookups that miss: arr.find(...) returns undefined when nothing matches; arr[0] on an empty array. Both flow silently into property access.
  4. A function that sometimes returns nothing — an early return without a value on one branch, used as if it always returns an object.
  5. Typos and renames — the property exists under a slightly different name on the actual object.
  6. Optional data treated as guaranteed — nested fields like order.customer.address.city where any level can legitimately be absent.

The fixes (and their honest trade-offs)

  1. Fix the source when the value should always exist — correct the API parsing, the find condition, the missing return. This is the real fix whenever “undefined” means “bug upstream.”
  2. Guard when absence is legitimate: optional chaining — user?.name — evaluates to undefined instead of throwing. Pair it with a fallback for display: user?.name ?? 'Guest'.
  3. Initialise state to a safe shape: start arrays as [] and objects as {} (or null + explicit loading UI) so first renders don't dereference nothing.
  4. In TypeScript, let the compiler hunt: strict mode + non-optional types on values that must exist turns this runtime error into a build-time squiggle.
Sprinkling ?. everywhere stops the crash and keeps the bug. If the value was supposed to exist, optional chaining converts a loud error into silent missing data. Guard the spots where absence is normal; fix the spots where it isn't.

The sibling error

“Cannot read properties of null” is the same story with a different empty value — null usually means “deliberately set to nothing” (an initial state, a cleared field, a JSON null), while undefined means “never set at all.” Knowing which one you're holding often identifies the culprit immediately.

Common questions

Why does it work sometimes and crash other times? Data timing or data shape: a slower network, an empty result set, one record missing a field. Intermittent versions of this error are data-dependent, so reproduce with the exact account/record that crashed.

Is this a browser bug? No — it's the language reporting an invalid operation, precisely as designed. The bug is always in the code's assumptions about its data.

Related errors

Next.js hydration error · CORS error · npm ERESOLVE