Cannot read properties of null

What is Cannot read properties of null?

This error is thrown when you attempt to access a property or invoke a method on a variable that evaluates to null. While null represents an intentional absence of any object value, it has no keys or attributes. Querying null.someProperty or null.toString() triggers a TypeError.

Common Causes

• Querying DOM elements that do not exist (document.querySelector returns null).
• Parsing database queries or API payloads that return null values for empty fields.
• Explicitly setting variables to null and accessing properties later without resetting them.

Common Mistakes

• Binding event listeners inside head scripts before the DOM structure is fully loaded by the browser.
• Accessing database records that have nullable columns without adding fallback checks.

How to Fix

Framework-Specific Examples

const btn = document.querySelector("#non-existent-btn");
try {
  btn.addEventListener("click", () => {}); // btn is null, throwing TypeError
} catch (err) {
  console.error(err.message); // Cannot read properties of null (reading 'addEventListener')
}

Server Configuration Examples

app.post('/update', (req, res) => {
  const settings = req.body.settings;
  if (settings === null) {
    return res.status(400).json({ error: 'Settings object cannot be null.' });
  }
  res.send('Success');
});

Best Practices

• Always query DOM elements inside DOMContentLoaded callbacks.
• Implement guards (e.g. if (element !== null)) before calling element methods.

Frequently Asked Questions (FAQ)