TypeError: X Is Not a Function — Why It Happens and 6 Fixes

What Does This Error Mean?

TypeError: xxx is not a function means JavaScript tried to call something as a function (with parentheses) that isn't callable — it's undefined, an object, a string, or a number. The error names the variable when possible, but in minified or dynamic code it often just says undefined is not a function, which is where the fun begins.

The 6 Causes (With Fixes)

1. Undefined variable / property

// Bad
const result = myFunction()  // myFunction was never defined

// Check: typeof before calling
if (typeof myFunction === 'function') myFunction()

2. Importing a module incorrectly — a named export imported as default (or vice versa):

// Bad — utils exports { formatDate }, not default
import utils from './utils'
utils.formatDate()  // TypeError: utils.formatDate is not a function

// Good
import { formatDate } from './utils'

3. Overwriting a method after using it — the classic: you assign arr.map = ... or destructure a method and call it detached:

// Bad — detached method loses its context
const map = array.map
const doubled = map(x => x * 2)  // TypeError in strict mode

// Good
const doubled = array.map(x => x * 2)

4. API response not what you expected — the data loaded asynchronously and data.items.map runs before items exists, or the API returned {error: ...}:

// Bad
const items = response.data.items.map(...)  // response.data.items is undefined

// Defensive
try {
  const items = (response.data?.items ?? []).map(...)
} catch { /* handle */ }

5. Calling a DOM method on the wrong element — getElementById returned null because the script ran before the element existed:

// Bad
const el = document.getElementById('chart')
el.querySelector(...)  // TypeError: el is null

// Good — defer the script or guard
const el = document.getElementById('chart')
if (el) el.querySelector(...)

6. Overriding built-in globals — something shadowed parseInt, setTimeout, or Map (a variable named Map or name in a module scope is a classic):

// Bad
const Map = {}
const m = new Map()  // TypeError: Map is not a constructor

// Good — rename your variable

The 3-Minute Debug Process

1. Find the exact call site (the stack trace line).
2. Add console.log(typeof yourThing, yourThing) right before the call — the typeof answers everything.
3. Ask: where did this value come from? If it's from an import, verify the export name matches. If it's from an API, log the raw response first. If it's from destructuring, check the source object actually has that key.

90% of the time, the error is a name mismatch between what you imported and what was exported, or a timing issue where data hasn't loaded. If you're dealing with the equally common undefined errors on object properties, our Cannot read properties of undefined guide covers that family.