Een foutmelding lezen

Een foutmelding is geen straf, maar een hint. De computer vertelt je wat er mis is, en vaak ook waar.

Waar zie je de foutmelding?

  • Browser: druk op F12 (Mac: Cmd + Option + J) → tabje Console. Fouten staan in het rood.

Zo pak je het aan

  1. Lees de eerste rode regel. Die zegt wat er mis is
  2. Zoek de bestandsnaam en het regelnummer, bijv. App.jsx:12. Daar zit de fout (of net een regel erboven)
  3. Zoek je foutmelding hieronder op

Tip: plak je foutmelding in de zoekbalk

Kopieer de rode regel en plak hem in de zoekbalk op het overzicht of op de homepage. Dan kom je direct bij de juiste uitleg.

is not defined

Uncaught ReferenceError: gebruikersNaam is not defined

Wat betekent het? Je gebruikt een variabele of functie die JavaScript niet kent.

Meestal is het een van deze drie:

  • Typfout — let op hoofdletters: naam en Naam zijn voor JavaScript twee verschillende dingen
  • Je bent vergeten de variabele te maken met let of const
  • De variabele bestaat alleen binnen een ander blok { } (scope)

Fout:

const gebruikersnaam = "Sam";
console.log(gebruikersNaam); // hoofdletter N!

Goed:

const gebruikersnaam = "Sam";
console.log(gebruikersnaam);

Cannot read properties of undefined

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

Wat betekent het? Je probeert iets uit te lezen (hier .name) van iets dat niet bestaat (undefined).

Fout:

const users = [{ name: "Sam" }];
console.log(users[1].name); // er is geen users[1]!

Goed:

const users = [{ name: "Sam" }];
console.log(users[0].name); // index begint bij 0

Tip: kijk wat er écht in je variabele zit

Zet er een console.log(users) boven. Negen van de tien keer zie je dan meteen dat de data er anders uitziet dan je dacht.

Cannot read properties of null

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

Wat betekent het? document.querySelector() heeft niks gevonden en geeft daarom null terug.

Twee oorzaken:

  • De selector klopt niet — # voor id, . voor class, en check de spelling
  • Je script draait te vroeg — het staat in de <head>, dus de HTML bestaat nog niet

Fout:

<head>
  <script src="script.js"></script>
</head>

Goed:

<head>
  <script src="script.js" defer></script>
</head>

Met defer wacht je script tot de HTML geladen is. Je kunt de <script> ook onderaan in de <body> zetten.

is not a function

Uncaught TypeError: data.map is not a function

Wat betekent het? Je roept iets aan als functie (), maar het is geen functie.

  • Typfout in de naam — foreach moet forEach zijn, querySelectorall moet querySelectorAll zijn
  • .map() op een object — .map() werkt alleen op arrays. Veel API's geven een object terug met de array erin

Fout:

const data = await response.json();
// data = { results: [ ... ] }
data.map((item) => item.name);

Goed:

const data = await response.json();
data.results.map((item) => item.name);

Assignment to constant

Uncaught TypeError: Assignment to constant variable.

Wat betekent het? Je probeert een const een nieuwe waarde te geven. Dat mag niet.

Fout:

const score = 0;
score = score + 1;

Goed:

let score = 0;
score = score + 1;

Gebruik let als de waarde later nog verandert, en const als hij hetzelfde blijft.

already been declared

Uncaught SyntaxError: Identifier 'naam' has already been declared

Wat betekent het? Je maakt twee keer een variabele met dezelfde naam.

Fout:

let naam = "Sam";
let naam = "Alex";

Goed:

let naam = "Sam";
naam = "Alex"; // zonder let: je past de bestaande aan

Unexpected token / missing )

Uncaught SyntaxError: missing ) after argument list

Wat betekent het? De "grammatica" van je code klopt niet: er mist een haakje, accolade, aanhalingsteken of komma (of er staat er een te veel). Andere varianten: Unexpected token '}', Unexpected end of input.

Fout:

function begroet(naam) {
  console.log("Hoi " + naam;
}

Goed:

function begroet(naam) {
  console.log("Hoi " + naam);
}

Tip: laat VS Code zoeken

Klik in de console op de bestandsnaam en het regelnummer (bijv. script.js:2). VS Code zet ook een rode kronkellijn onder de fout. Staat er niks op die regel? Kijk dan een regel hoger.

import outside a module

Uncaught SyntaxError: Cannot use import statement outside a module

Wat betekent het? Je gebruikt import, maar de browser weet niet dat je bestand een module is.

Fout:

<script src="main.js"></script>

Goed:

<script type="module" src="main.js"></script>

Let op: zet in je import ook .js achter de bestandsnaam: import { tel } from "./utils.js";

is not valid JSON

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Wat betekent het? Je verwacht JSON, maar je krijgt een HTML-pagina terug (de < is het begin van <!DOCTYPE html>). Bijna altijd is de URL fout en krijg je een 404-pagina.

Open de URL uit je fetch() eens los in je browser. Zie je JSON? Dan klopt hij. Zie je een foutpagina? Dan zit er een typfout in.

const response = await fetch(url);

// Check of het gelukt is vóór je .json() doet
if (!response.ok) {
  throw new Error(`Fout: ${response.status}`);
}

const data = await response.json();

await only valid in async

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

Wat betekent het? Je gebruikt await in een functie die niet async is.

Fout:

function haalOp() {
  const response = await fetch(url);
}

Goed:

async function haalOp() {
  const response = await fetch(url);
}

Failed to fetch

Uncaught (in promise) TypeError: Failed to fetch

Wat betekent het? De browser kon de server helemaal niet bereiken.

  • Staat je server aan? (eigen backend: draait npm run dev nog?)
  • Klopt de URL? http vs https, het poortnummer?
  • Heb je internet?
  • Staat er ook iets over CORS in de console? Zie CORS-fout