Cannot Read Properties of Undefined

What the error means

In TypeError: Cannot read properties of undefined (reading 'name'), the code ran something like user.name while user was undefined. Look one step to the left of the property in the message.

undefined means a value was never set: a variable without a value, a missing object key, an array index past the end, or a function that returned nothing. Older Chrome versions wrote the same error as Cannot read property 'name' of undefined.

The error message in each browser or library
Where	Message
Chrome, Edge, Node.js	TypeError: Cannot read properties of undefined (reading 'name')
Firefox	TypeError: can't access property "name", user is undefined
Safari	TypeError: undefined is not an object (evaluating 'user.name')

Common causes

Data is not loaded yet: the first render runs before the request finishes, and the state starts as undefined.
array.find() found no match and returned undefined, or the code read items[0] from an empty array.
The API response does not have a field the code expects: it is optional, renamed, or missing from error responses.
A function returns nothing on one branch, and the caller uses the result.
A class method was passed as a callback, so this is undefined when it runs (reading 'state', reading 'props').

Reproduce it

Start from the smallest object that lacks the value, then read through it.

TypeScript

const users = [{ id: 1, profile: { name: "Ada" } }];const user = users.find((item) => item.id === 2); // no match: undefined console.log(user.profile.name);// TypeError: Cannot read properties of undefined (reading 'profile')

Fix it

Handle the missing case on purpose

When a missing value is a normal state, check for it first and render something useful. Do not let the property read decide.

TypeScript

const user = users.find((item) => item.id === selectedId);if (!user) return <EmptyState title="User not found" />; return <ProfileName name={user.profile.name} />;

Use optional chaining only where missing is valid
?. and ?? stop the error, but they also hide real bugs. Use them for fields that are optional by design, and give a clear fallback.
TypeScript
```
// profile.nickname is optional in the APIconst label = user.profile?.nickname ?? user.profile.name;
```
Fail loudly where the data enters
Check the response shape once, when it arrives. A clear error at the boundary is easier to fix than a TypeError deep in the UI.
TypeScript
```
const body = await response.json();if (!body.profile) {  throw new Error(`GET /api/me: profile missing for user ${body.id}`);}
```

Bind methods you pass as callbacks

Wrap the call in an arrow function, or bind the method, so this still points at the object.

TypeScript

// this is undefined inside increment when it runsbutton.addEventListener("click", counter.increment); // this is counterbutton.addEventListener("click", () => counter.increment());

Catch it in production

The Squasher browser SDK sends this error to your project when it happens, so you do not wait for a user to report it.

Uncaught errors from the window error event are captured with the stack frames, page URL, release, and session ID.
For React render errors, wrap your app in SquasherErrorBoundary from @squasher-ai/browser/react. It also sends the component stack.
Every event carries the release you set in init(), so you can tell which deploy started the errors.

src/main.tsx

import { init } from "@squasher-ai/browser";import { SquasherErrorBoundary } from "@squasher-ai/browser/react"; init({  apiKey: import.meta.env.VITE_SQUASHER_API_KEY,  projectId: import.meta.env.VITE_SQUASHER_PROJECT_ID,  release: import.meta.env.VITE_GIT_SHA,}); root.render(  <SquasherErrorBoundary fallback={<p>Something went wrong.</p>}>    <App />  </SquasherErrorBoundary>,);