TypeError: x is not a function
You called something that is not a function — undefined, a string, an object. The message names exactly what you tried to call.
What it means
JavaScript checks callability at the moment of the call. "x is not a function" means the expression before the ( ) evaluated to something else. If it is undefined, the name is wrong or never set; if it is defined, a variable has taken the function's place.
Common causes
1. A misspelled method name
Method names are case-sensitive; a wrong one is undefined, and calling undefined throws.
Breaks
document.getElementByID("app");Works
document.getElementById("app");2. An optional callback that was not passed
Calling a missing callback throws only for the callers that omit it.
Breaks
function load(url, onDone) {
fetch(url).then(r => onDone(r));
}
load("/api");Works
function load(url, onDone = () => {}) {
fetch(url).then(r => onDone(r));
}3. A variable that shadows the function
A later declaration with the same name replaces the function.
Breaks
function total(items) { /* ... */ }
let total = 0;
total(items);Works
function total(items) { /* ... */ }
let sum = total(items);4. Default versus named import
Importing a named export as default (or the reverse) gives undefined.
Breaks
// format.js: export function format() {}
import format from "./format.js";Works
import { format } from "./format.js";How to find it in your own code
console.log(typeof thing) right before the call. undefined means a typo, a missing argument, or a bad import; anything else means something overwrote the function — search for assignments to that name.
Still not sure why yours breaks?
Paste it into the visualizer and watch it run line by line, with every variable at every step. Free, and it runs in your browser.