Errors / JavaScript errors

Uncaught TypeError: Cannot read properties of null (reading '…')

A script looked for something on the page that was not there, and stopped.

Everything after the failing line in that script stops, so a button, a menu or a form can quietly do nothing.

Why it happens

• document.querySelector() or getElementById() found nothing, usually because the element is on another page, was renamed, or is added later, and the code went on to use the result.
• The script runs before the HTML it needs exists: a <script> in the <head> without defer, touching document.body or a form that has not been parsed yet.
• An API answered null for a field the code expected to be an object.

How to fix it

1. Read the property named in brackets: (reading 'addEventListener') means the thing before .addEventListener is null. The stack's first line says which file and line.
2. Check the element exists before using it (el?.addEventListener(…), or return early), or load the script with defer so the HTML is there first.
3. If the script is shared by every page, guard the parts that only apply to some of them.

Whose problem it is

Either the site's own code or a third party's, depending on where it comes from.

Often seen with

• Cannot read properties of undefinedA script used a piece of data that had not arrived, or does not exist, and stopped.
• x is not a functionA script tried to use something as an action that is not one, and stopped.