"TypeError: X Is Not a Function": The Common Causes and Fixes

TypeError: data.map is not a function
TypeError: (0 , _utils.formatDate) is not a function
TypeError: res.json is not a function

All of these mean the same thing: the code tried to call something — put () after it — but that thing isn't a function. It's undefined, an object, a string, a number, or a Promise.

The name before "is not a function" tells you exactly which value to inspect.

The fastest way to diagnose

Log the thing right before the line that fails:

console.log(typeof data, data)
data.map(...)

Whatever typeof prints — "undefined", "object", "string" — tells you which of the causes below applies.

Cause 1: .map is not a function — it's not an array

By far the most common, especially in React. .map, .filter and .forEach exist only on arrays. The value is usually:

• An object wrapping the array. The API returns { items: [...] } and you called .map on the whole thing. Use data.items.map(...).
• null or a string because the API returned an error or nothing.
• An object because you initialised state with {} instead of []:

const [items, setItems] = useState([])   // not useState({}) or useState()

If it can legitimately be missing for a moment, guard it:

{(items ?? []).map(item => <Row key={item.id} item={item} />)}

(If the error is "Cannot read properties of undefined (reading 'map')" instead, the value is undefined — that one has its own post.)

Cause 2: Wrong import

TypeError: (0 , _utils.formatDate) is not a function

That odd (0 , _utils.…) shape is the bundler's way of calling an imported function. It means the import didn't give you a function. Usually:

• Default vs named import mixup.

// utils.js
export default function formatDate() {}

// elsewhere
import { formatDate } from './utils'   // ❌ named import of a default export
import formatDate from './utils'       // ✅

• The function isn't exported at all, or is spelled differently.
• Circular imports: two files import each other, and one sees the other half-loaded.

Cause 3: A missing await

const res = fetch('/api/users')   // forgot await
const data = res.json()            // TypeError: res.json is not a function

Without await, res is a Promise, not a Response. Add await (inside an async function). (Async/await in JavaScript)

Cause 4: A typo or wrong method name

array.length() (length isn't a function), str.toUppercase() (it's toUpperCase), document.getElementByID (it's getElementById). JavaScript is case-sensitive. Your editor's autocomplete — and TypeScript — catch these before you run anything.

Cause 5: A name collision

A variable overwrote the function:

function total(items) { ... }
let total = total(cart)   // now 'total' is a number; calling it again fails

Or a prop called onChange was passed a string instead of a function. Rename one of them.

Cause 6: Calling a method on the wrong kind of value

• .then on something that isn't a Promise.
• .split on a number (String(value).split(...) fixes it).
• jQuery or a library not loaded yet, so $ isn't what you think.

The summary

• The name before "is not a function" is the value to inspect; log it with typeof.
• .map is not a function → it's not an array; check the API shape and initial state.
• (0, _module.fn) → import problem; check default vs named exports.
• .json is not a function → missing await.
• TypeScript catches most of these before they run.

---

EasySpawn gives Claude Code your running app and its logs on one server, so it can reproduce an error like this, inspect the value and fix the cause rather than guessing. See how it works or join the waitlist.

Related: Cannot Read Properties of Undefined · JavaScript Array Methods: map, filter, reduce · Debugging for Beginners · How to Read an Error Message