‘Uncaught TypeError: Cannot read properties of undefined (reading …)’ of ‘of null’? Lees wat het betekent en hoe je het vindt en oplost met F12, defer en ?.
Deze fout betekent dat je JavaScript-code een eigenschap probeert te lezen van iets dat er niet is. In data.items.length wil de code length lezen van data.items; is data.items undefined (geen waarde) of null (bewust leeg), dan kan dat niet en stopt het script met een TypeError. Tussen haakjes staat welke eigenschap het script wilde lezen. Het probleem zit dus in het stuk vóór die eigenschap.
De tekst verschilt per browser. Chrome, Edge en Node.js zeggen Cannot read properties of undefined (reading 'x'); oudere versies zeiden Cannot read property 'x' of undefined. Firefox meldt can't access property "x", … is undefined en Safari undefined is not an object (evaluating '…'). Bij schrijven in plaats van lezen wordt het Cannot set properties of undefined (setting 'x').
Veelvoorkomende oorzaken: gegevens van een API zijn nog niet binnen terwijl de code ze al gebruikt; een API geeft een andere structuur terug dan verwacht (of een foutmelding); een script draait vóórdat het HTML-element bestaat, waardoor document.querySelector null teruggeeft; een tikfout in een eigenschapnaam; of een functie die niets teruggeeft (return vergeten).
Uncaught TypeError, vaak met een bestandsnaam en regelnummer erachter.Menunamen kunnen per versie of toestel iets anders heten. Loop de stappen op volgorde af en stop zodra het werkt.
Druk op F12 (op een Mac Cmd+Option+I) en open het tabblad Console. Klik op de bestandsnaam en het regelnummer achter de fout; de browser springt dan naar de regel in het tabblad Sources. Kijk welk stuk vóór de genoemde eigenschap leeg is. Bij (reading 'length') in user.orders.length is user.orders de boosdoener, niet length.
Zet een breekpunt op die regel (klik op het regelnummer in Sources) of log de waarde net ervoor. Dan zie je of het undefined, null of iets met een andere vorm is. Kijk ook in het tabblad Network wat de server werkelijk teruggaf.
console.log('data:', data);
console.log(JSON.stringify(data, null, 2));Staat er of null (reading 'addEventListener') of iets vergelijkbaars, dan vond querySelector of getElementById het element niet. Vaak draait het script in de <head>, vóórdat de HTML is ingelezen. Zet defer op het script, plaats het onderaan de pagina, of wacht op DOMContentLoaded. Controleer ook of de id of class precies klopt.
<script src="/js/app.js" defer></script>
document.addEventListener('DOMContentLoaded', () => {
const knop = document.querySelector('#verstuur');
if (knop) knop.addEventListener('click', verstuur);
});Gegevens van fetch komen later binnen dan de rest van je code draait. Werk ermee binnen de .then() of na await, en niet erbuiten. In frameworks als React is de beginwaarde van een state vaak undefined tot de data er is; geef dan een lege beginwaarde zoals [].
async function laad() {
const res = await fetch('/api/producten');
const data = await res.json();
toon(data.items);
}
// React: lege lijst als beginwaarde
const [items, setItems] = useState([]);Kan een waarde terecht ontbreken, gebruik dan optional chaining (?.): dat geeft undefined terug in plaats van een fout. Met ?? geef je een standaardwaarde als iets null of undefined is. Gebruik dit waar ontbreken normaal is, niet om een echte fout te verbergen.
const aantal = data?.items?.length ?? 0;
const naam = user?.profiel?.naam ?? 'onbekend';
knop?.addEventListener('click', verstuur);Gaf de API een foutmelding terug, een lege lijst, of staan de gegevens één niveau dieper (bijvoorbeeld data.data.items)? Controleer de statuscode met res.ok voordat je de gegevens gebruikt. Een 401, 404 of 500 geeft meestal een heel ander object terug dan je code verwacht.
const res = await fetch('/api/producten');
if (!res.ok) {
throw new Error('API gaf status ' + res.status);
}
const data = await res.json();
if (!Array.isArray(data.items)) {
console.warn('onverwachte respons', data);
}JavaScript is hoofdlettergevoelig: data.Items is iets anders dan data.items. Kijk ook of functies die iets moeten teruggeven echt een return hebben; een pijlfunctie met accolades geeft zonder return undefined terug.
// geeft undefined terug:
const prijzen = producten.map(p => { p.prijs });
// goed:
const prijzen = producten.map(p => p.prijs);Let op: Plak ?. niet overal neer om de fout weg te krijgen. Ontbreekt een waarde die er altijd hoort te zijn, dan verberg je zo een fout in je gegevens of API en krijg je later een stil kapotte pagina.
Kom je er met deze stappen niet uit, of wil je het liever niet zelf doen? We kijken online mee of komen langs. Hulp op afstand kost €20 per uur; komen we langs, dan is de prijs op aanvraag. Je weet vooraf waar je aan toe bent.
Schrijf kort wat er misgaat en wat je al hebt geprobeerd. Kies of we bellen, online meekijken of langskomen.
De code probeert een eigenschap te lezen van iets dat geen waarde heeft. Het stuk vóór de genoemde eigenschap is undefined.
Bij undefined is er nooit een waarde gegeven, bijvoorbeeld een ontbrekende eigenschap. Bij null is de waarde bewust leeg; dat zie je vaak als querySelector een element niet vindt.
Ja, dat is de oudere formulering van dezelfde fout in Chrome en Node.js. Recente versies gebruiken ‘Cannot read properties of undefined (reading …)’.
Dan is het meestal een kwestie van timing: de gegevens of het element zijn er de ene keer net op tijd en de andere keer niet. Wacht expliciet op de gegevens of op DOMContentLoaded.
Hulp nodig van een mens? Website-onderhoud · Hosting en onderhoud · WordPress-support · Alle oplossingen