Fix: TypeError: Cannot read properties of undefined (reading 'xxx')

The Error

You run your JavaScript code and hit one of these errors:

Modern browsers (Chrome 92+, Edge, Node 16.6+):

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

Older browsers and Node versions:

TypeError: Cannot read property 'name' of undefined

The null variant:

TypeError: Cannot read properties of null (reading 'name')

All three mean the same thing: you tried to access a property on a value that is undefined or null. The 'name' part (or whatever property appears in the error) tells you which property access failed. The value to the left of that property is the problem — it’s undefined or null when your code expected an object.

Why This Happens

In JavaScript, undefined and null are not objects. They have no properties. When you write something.name, JavaScript needs something to be an object (or at least a value with properties, like a string or number). If something is undefined or null, JavaScript throws a TypeError.

Here’s the simplest reproduction:

let user = undefined;
console.log(user.name); // TypeError: Cannot read properties of undefined (reading 'name')

The tricky part is that user is rarely set to undefined explicitly. It’s usually undefined because of a bug somewhere else in your code.

Fix

1. API Response Not Yet Loaded (Async Timing)

This is the most common cause in React and other frontend frameworks. You render a component before the data it depends on has arrived.

Broken code:

function UserProfile() {
  const [user, setUser] = useState(); // user is undefined initially

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  // First render: user is undefined → crash
  return <h1>{user.name}</h1>;
}

On the first render, user is undefined because useEffect hasn’t fired yet. Accessing user.name throws.

Fix — guard against the loading state:

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (!user) return <p>User not found.</p>;

  return <h1>{user.name}</h1>;
}

You can also use optional chaining as a lighter approach:

return <h1>{user?.name ?? 'Loading...'}</h1>;

But explicit loading states give a better user experience and make your intent clear to other developers.

2. Wrong Variable Name or Typo in Property Access

A simple typo causes the property access to return undefined, and then you try to read a property on that undefined value.

Broken code:

const config = {
  database: {
    host: 'localhost',
    port: 5432,
  },
};

// Typo: "databse" instead of "database"
console.log(config.databse.host);
// TypeError: Cannot read properties of undefined (reading 'host')

config.databse is undefined because that key doesn’t exist. Then .host fails.

Fix: Check your property names carefully. Use TypeScript to catch this at compile time:

interface Config {
  database: {
    host: string;
    port: number;
  };
}

const config: Config = {
  database: { host: 'localhost', port: 5432 },
};

console.log(config.databse.host);
//                 ~~~~~~~~
// Property 'databse' does not exist on type 'Config'. Did you mean 'database'?

3. Array Index Out of Bounds

Accessing an index that doesn’t exist returns undefined. If you then access a property on it, you get the error.

Broken code:

const users = [{ name: 'Alice' }, { name: 'Bob' }];

// Only 2 elements (index 0 and 1), but we try index 2
console.log(users[2].name);
// TypeError: Cannot read properties of undefined (reading 'name')

Fix — check the array length or use optional chaining:

// Option A: bounds check
if (users.length > 2) {
  console.log(users[2].name);
}

// Option B: optional chaining
console.log(users[2]?.name); // undefined (no crash)

Watch out for this with .find() too — it returns undefined when no match is found:

const admin = users.find(u => u.role === 'admin');
console.log(admin.name); // TypeError if no admin exists

// Fix:
const admin = users.find(u => u.role === 'admin');
console.log(admin?.name); // undefined (no crash)

4. Missing Function Parameter

When a function expects an object argument and you call it without one (or with the wrong shape), the parameter is undefined.

Broken code:

function greet(user) {
  return `Hello, ${user.name}!`;
}

greet(); // TypeError: Cannot read properties of undefined (reading 'name')

Fix — use a default parameter:

function greet(user = { name: 'Guest' }) {
  return `Hello, ${user.name}!`;
}

greet(); // "Hello, Guest!"

Or add a guard clause:

function greet(user) {
  if (!user) return 'Hello, Guest!';
  return `Hello, ${user.name}!`;
}

In TypeScript, mark required parameters explicitly and let the compiler enforce call sites:

function greet(user: { name: string }) {
  return `Hello, ${user.name}!`;
}

greet(); // Compile error: Expected 1 arguments, but got 0

5. Destructuring an Undefined Object

Destructuring is just property access under the hood. If the value you destructure is undefined, you get the same error.

Broken code:

function processResponse(response) {
  const { data } = response; // TypeError if response is undefined
  console.log(data);
}

processResponse(); // called without argument

Fix — use a default value in the destructuring pattern:

function processResponse(response = {}) {
  const { data } = response; // data is undefined, but no crash
  console.log(data);
}

Or provide a default directly in the parameter destructuring:

function processResponse({ data = null } = {}) {
  console.log(data); // null (no crash)
}

The = {} after the destructuring pattern is critical. Without it, calling processResponse() with no arguments still throws.

6. Deep Nested Object Access

When you chain property access like a.b.c.d, any link in that chain being undefined breaks everything that follows.

Broken code:

const order = {
  customer: {
    name: 'Alice',
    // address is not present
  },
};

console.log(order.customer.address.street);
// TypeError: Cannot read properties of undefined (reading 'street')

order.customer.address is undefined, so .street throws.

Fix — optional chaining (?.):

console.log(order.customer?.address?.street); // undefined (no crash)

Optional chaining short-circuits: if any part of the chain is undefined or null, the entire expression evaluates to undefined instead of throwing.

Combine with nullish coalescing (??) for a fallback value:

const street = order.customer?.address?.street ?? 'No address on file';
console.log(street); // "No address on file"

Use ?? instead of || here. The || operator treats '' (empty string) and 0 as falsy and would replace them with the fallback. The ?? operator only triggers on null and undefined.

Quick Reference: Fix Patterns

Optional Chaining (?.)

Safely access nested properties. Returns undefined instead of throwing:

user?.profile?.avatar?.url

Works with method calls and bracket notation too:

user?.getProfile?.()     // safe method call
user?.['first-name']     // safe bracket access

Nullish Coalescing (??)

Provide a fallback when a value is null or undefined:

const name = user?.name ?? 'Anonymous';

Default Parameters

Give function parameters a fallback value:

function render(options = {}) {
  const { width = 800, height = 600 } = options;
}

Guard Clauses / Early Returns

Bail out of a function early when data is missing:

function updateUser(user) {
  if (!user) return;
  if (!user.profile) return;

  user.profile.lastUpdated = Date.now();
}

React-Specific Patterns

Conditional Rendering

Only render a component when the data it needs is available:

function Dashboard({ user }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {user && <UserProfile user={user} />}
      {user?.posts?.length > 0 && <PostList posts={user.posts} />}
    </div>
  );
}

The useEffect Data Fetching Pattern

The standard pattern for fetching data in a React component:

function OrderDetails({ orderId }) {
  const [order, setOrder] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;

    fetch(`/api/orders/${orderId}`)
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(data => {
        if (!cancelled) setOrder(data);
      })
      .catch(err => {
        if (!cancelled) setError(err.message);
      });

    return () => { cancelled = true; };
  }, [orderId]);

  if (error) return <p>Error: {error}</p>;
  if (!order) return <p>Loading...</p>;

  return (
    <div>
      <h2>Order #{order.id}</h2>
      <p>Status: {order.status}</p>
      <p>Total: ${order.total}</p>
    </div>
  );
}

Key points:

• Initialize state to null, not undefined. This makes your intent clear — the data hasn’t loaded yet.
• Guard the render with a null check before accessing properties.
• Handle errors so a failed fetch doesn’t leave the component in a broken state.
• Use a cleanup flag (cancelled) to avoid setting state on an unmounted component when the orderId prop changes.

Still Not Working?

Place console.log Before the Failing Line

The error stack trace tells you the line number. Add a console.log directly before that line to inspect the value:

console.log('user value:', user);
console.log('user type:', typeof user);
console.log('user is null:', user === null);
console.log('user is undefined:', user === undefined);
console.log(user.name); // this is the line that throws

This tells you whether the value is undefined, null, or something else entirely (like a string or number when you expected an object).

Use the Debugger

Add a debugger; statement right before the crash. When DevTools is open, execution pauses there and you can inspect every variable in scope:

debugger;
console.log(user.name);

Or set a breakpoint directly in the Sources panel of Chrome DevTools.

Check the Network Tab for API Issues

If the error involves data from an API:

1. Open DevTools and go to the Network tab.
2. Find the API request and check its status code. A 404 or 500 means the data you expected didn’t come back.
3. Click the request and check the Response tab. Verify the JSON structure matches what your code expects. A common issue: the API returns { data: { users: [...] } } but your code accesses response.users instead of response.data.users.

Check for Race Conditions

If the error happens intermittently, you likely have a timing issue. Two things to check:

• Are you accessing state before useEffect fires? The component renders once with initial state before effects run.
• Are you accessing a value that depends on another async operation completing first? Chain your promises or use async/await to ensure ordering.

Check the Error Stack Trace

The stack trace shows you the exact chain of function calls that led to the error. Read it from top to bottom:

TypeError: Cannot read properties of undefined (reading 'street')
    at formatAddress (src/utils/format.js:12:28)
    at UserCard (src/components/UserCard.jsx:45:22)
    at renderWithHooks (react-dom.development.js:16305:18)

Line 12 of format.js is where it crashed. Line 45 of UserCard.jsx is where formatAddress was called. Check both locations — the bug might be in how the data was passed, not in the function itself.

Related: Fix: Port 3000 Is Already in Use