"Cannot read properties of null" is a JavaScript TypeError that fires when you try to access a property or method on a value that is explicitly null. This error occurs in any JavaScript runtime—browsers, Node.js, and frameworks like Next.js—and it's one of the most common runtime failures developers hit daily.
What "Cannot read properties of null" Means
JavaScript is telling you that the object you're trying to access doesn't exist. Unlike undefined (a variable declared but not assigned), null is an intentional absence of value. When you write something.name or something.map(), the engine checks if something is null first—and throws this error if it is.
Why It Happens
The root cause is almost always one of two things: an API response that doesn't contain the field you expect, or a DOM element that hasn't rendered yet. In Node.js, it's typically a missing environment variable or a database query returning no rows. In the browser, it's usually a script running before the DOM is ready or a selector that doesn't match anything.
Example Code That Triggers It
Here's a minimal, runnable example that produces this exact error in a browser:
// This runs immediately, before the DOM has parsed the <div>
const container = document.querySelector('.results');
console.log(container.textContent);
// TypeError: Cannot read properties of null (reading 'textContent')
In Node.js, the same error appears when a function returns null instead of an object:
function findUser(id) {
// Simulates a DB query returning no match
return null;
}
const user = findUser(42);
console.log(user.name);
// TypeError: Cannot read properties of null (reading 'name')
How to Fix It
For the DOM case, defer the script or wrap it in a DOMContentLoaded listener:
document.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('.results');
if (container) {
console.log(container.textContent);
}
});
For the Node.js case, add a guard clause:
const user = findUser(42);
if (user !== null) {
console.log(user.name);
} else {
console.log('User not found');
}
The fix works because you're either waiting for the element to exist or explicitly handling the null case before accessing properties.
Common Mistakes That Cause This
Mistake 1: Assuming API responses are always complete. Developers often chain properties without checking intermediate values. response.data.user.profile.name will throw if any link in that chain is null. Use optional chaining (response?.data?.user?.profile?.name) or validate each level.
Mistake 2: Querying the DOM before it's ready. Scripts in the <head> without defer or scripts placed before the target element in the HTML will always find null. Move scripts to the bottom of <body> or use event listeners.
When Should You Worry About This?
You should worry when this error appears in production but not in development. That usually means an API contract changed, a third-party service returned an unexpected shape, or a feature flag disabled a section of the UI. If it's intermittent, check network logs and error tracking—it's likely a race condition between data fetching and rendering. In Next.js, this often surfaces during server-side rendering when window or document is accessed without a guard.
Next time you see "Cannot read properties of null," check the line number and look one line above it—that's almost always where the null value was assigned or returned.