Fix: TypeError: x is not a function

The Error

You run JavaScript code and get:

TypeError: myFunction is not a function

Or variations:

TypeError: response.json is not a function

TypeError: arr.map is not a function

TypeError: document.getElementById(...).addEventListener is not a function

TypeError: (intermediate value)(...) is not a function

Uncaught TypeError: this.setState is not a function

JavaScript tried to call something as a function, but the value is not a function. It could be undefined, null, a string, a number, an object, or any other non-function type.

Why This Happens

When you write something(), JavaScript expects something to be a function (or a callable object). If it is anything else — undefined, null, a number, a string, an object — the engine throws TypeError. The engine performs this check at the moment the call is made; it does not know in advance that the value is wrong, which is why the error appears at runtime even if your editor showed no warning.

The wording of the message varies by engine. V8 (Chrome, Node.js) says TypeError: x is not a function. SpiderMonkey (Firefox) says TypeError: x is not a function. JavaScriptCore (Safari) prefers TypeError: x.foo is not a function. (In 'x.foo()', 'x.foo' is undefined). The Safari wording is the most informative because it tells you which property was being called. If you can reproduce the error in Safari, the message often tells you the entire fix.

The error also surfaces when something is a function but is the wrong function. For example, new RegExp("foo") is a constructor call; if RegExp was shadowed by a local const RegExp = "literal";, the call fails with this exact message. The cause is rarely a typo in the call site itself — it is almost always a problem with the value being called or with the scope in which it was defined.

Common causes:

• Typo in the function name. documnet.getElementById instead of document.getElementById.
• Variable is not what you think. A variable was reassigned, overwritten, or shadowed by another declaration.
• Missing or wrong import. The module does not export the function you are trying to use.
• Calling a method on the wrong type. "hello".map() — strings do not have a map method.
• Calling parentheses on a non-function. Two expressions next to each other without a semicolon: const a = {}(function() {})().
• this context lost. A method extracted from an object loses its this binding.
• Async/await mistake. Calling .then() on a non-Promise, or forgetting to await a function that returns an object.

Version History That Changes the Failure Mode

The JavaScript language and the Node.js runtime have added features over time that change which is not a function patterns can even occur. Knowing your engine version often eliminates the workaround you were about to apply.

• ES2015 (ES6, Jun 2015) introduced arrow functions, class syntax, const/let, default exports, and import/export. Most of Fixes 1, 4, and 8 below only apply to ES2015+ code; pre-ES6 code uses var and prototype-based “classes” that have their own pitfalls.
• ES2017 / Node.js 7.6 (Feb 2017) stabilized async/await. Before this, the Promise callback chain in Fix 6 was the only option. After it, const data = await response.json(); is the clean form and .json() chain bugs are rarer.
• ES2019 added Array.prototype.flat and flatMap. Calling .flat() on an old V8 (Node < 11) throws flat is not a function. The fix is to upgrade Node, not to polyfill.
• ES2020 (Node 14, Apr 2020 / Chrome 80, Feb 2020) introduced optional chaining (?.) and nullish coalescing (??). Fix 9’s onSuccess?.(data) syntax only compiles in environments that support ES2020 or transpile to it.
• ES2021 added String.prototype.replaceAll. Calling "a".replaceAll(...) in older Safari (< 13.1) throws replaceAll is not a function.
• ES2022 (Node 16+) stabilized top-level await, Object.hasOwn, Error.cause, .at() on arrays and strings, and class fields. Top-level await in ESM modules changes how module initialization can fail — a function imported from a module that throws during top-level await becomes undefined and calling it raises this error.
• Node 17 (Oct 2021) upgraded to OpenSSL 3, which broke many old crypto-related packages. Cryptic is not a function errors from libraries pinned to OpenSSL 1.1.1 APIs traced back to this break. The workaround for legacy code is --openssl-legacy-provider; the real fix is to update the library.
• ES2023 (Node 20, Apr 2023) added non-mutating array methods (toSorted, toReversed, toSpliced, with). Calling arr.toSorted() on Node < 20 fails with this error.
• ES2024 (Node 22, Apr 2024) finalized Promise.withResolvers, Object.groupBy, Map.groupBy, and RegExp v-flag. Same pattern: calling these on older engines fails with is not a function.
• Node 22 (Apr 2024) introduced experimental require(esm) support, which finally lets CommonJS code synchronously require an ES module that has no top-level await. Earlier Node versions returned a Promise-wrapped namespace, so require("./esm-module.js").foo() failed with foo is not a function because foo was on the resolved promise, not the require result.
• Node 23 / Node 24 LTS roadmap (2024–2025) continues stabilizing ESM/CJS interop and the built-in test runner. Track release notes when an is not a function error appears after a Node upgrade.

If your error is a built-in method like flat, at, replaceAll, toSorted, groupBy, or hasOwn, check your runtime version before writing a polyfill. The fix is almost always to upgrade.

Fix 1: Check the Variable Type

Before calling something as a function, verify what it actually is:

console.log(typeof myFunction);        // Should be "function"
console.log(myFunction);               // See the actual value
console.log(typeof myFunction === "function");  // true or false

If it prints undefined, the variable was never assigned a function. If it prints object, string, or number, it was assigned something else.

Common case — variable overwritten:

let filter = (arr) => arr.filter(x => x > 0);

// Later, accidentally overwritten:
const filter = document.getElementById("filter"); // Now it's an HTML element!

filter([1, -2, 3]); // TypeError: filter is not a function

Rename one of the variables to avoid the conflict.

Pro Tip: Use const instead of let whenever possible. If the variable is const, you get an error at the point of reassignment instead of a confusing TypeError later. This makes bugs easier to find.

Fix 2: Fix Missing or Wrong Imports

A common cause in module-based code. The function you imported might not exist in the module:

Broken — wrong import:

// The module exports { fetchUser } but you import fetchUsers (plural)
import { fetchUsers } from "./api.js";

fetchUsers(); // TypeError: fetchUsers is not a function

Fixed:

import { fetchUser } from "./api.js";

fetchUser();

Broken — default vs. named import confusion:

// Module exports: export default function myFunc() {}
import { myFunc } from "./module.js";  // Wrong — named import
myFunc(); // TypeError: myFunc is not a function

// Fixed:
import myFunc from "./module.js";  // Correct — default import

Check what the module exports:

import * as myModule from "./module.js";
console.log(myModule);  // See all exports

For module import resolution issues, see Fix: Module not found: Can’t resolve.

Fix 3: Fix .map() on Non-Arrays

arr.map is not a function usually means arr is not an array:

const data = fetchData();  // Returns an object, not an array
data.map(item => item.name);  // TypeError: data.map is not a function

Fix: Check if the value is an array:

console.log(Array.isArray(data));  // false
console.log(data);                 // { results: [...] }

Fix: Access the actual array inside the response:

const data = fetchData();
data.results.map(item => item.name);  // Access the array property

Fix: Convert to an array if needed:

// Object to array of entries
Object.entries(data).map(([key, value]) => `${key}: ${value}`);

// Object values to array
Object.values(data).map(item => item.name);

// String to array
const chars = Array.from("hello");  // ["h", "e", "l", "l", "o"]

Fix: Handle the case where data might not be an array:

const items = Array.isArray(data) ? data : [];
items.map(item => item.name);

If the data is coming from an API and might be null or undefined, see Fix: TypeError: Cannot read properties of undefined.

Fix 4: Fix this Context Issues

When you extract a method from an object, this is no longer bound to the object:

Broken:

class Timer {
  constructor() {
    this.seconds = 0;
  }

  start() {
    setInterval(this.tick, 1000);  // `this` is lost inside setInterval
  }

  tick() {
    this.seconds++;  // TypeError: Cannot read properties of undefined
    console.log(this.seconds);
  }
}

Fixed — bind the method:

start() {
  setInterval(this.tick.bind(this), 1000);
}

Fixed — use an arrow function:

start() {
  setInterval(() => this.tick(), 1000);
}

Fixed — define as an arrow function property:

class Timer {
  seconds = 0;

  tick = () => {
    this.seconds++;
    console.log(this.seconds);
  };

  start() {
    setInterval(this.tick, 1000);
  }
}

Arrow functions capture this from the enclosing scope, so they always use the correct context.

React-specific: In React class components, event handlers lose this context:

class MyComponent extends React.Component {
  handleClick() {
    this.setState({ clicked: true }); // TypeError: this.setState is not a function
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Fix by binding in the constructor or using an arrow function:

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

Or:

handleClick = () => {
  this.setState({ clicked: true });
};

Fix 5: Fix Missing Semicolons (IIFE Issues)

JavaScript’s automatic semicolon insertion (ASI) can cause unexpected is not a function errors:

Broken:

const a = { name: "Alice" }
(function() {
  console.log("IIFE");
})()

JavaScript interprets this as { name: "Alice" }(function() { ... })() — calling the object as a function.

Fixed — add a semicolon:

const a = { name: "Alice" };
(function() {
  console.log("IIFE");
})();

This happens whenever a line starts with (, [, or a template literal ` and the previous line does not end with a semicolon.

Common Mistake: Relying on ASI (automatic semicolon insertion) without understanding its rules. ASI does NOT insert a semicolon before (, [, /, +, -, or `. If your coding style omits semicolons, prefix lines starting with these characters with a ;:

;(function() { ... })()
;[1, 2, 3].forEach(...)

Fix 6: Fix .json() and Fetch API Issues

response.json is not a function usually means you are calling .json() on something that is not a Response object:

Broken — already parsed:

fetch("/api/data")
  .then(res => res.json())
  .then(data => data.json())  // TypeError: data.json is not a function

After .json() is called once, the result is a plain object, not a Response. You cannot call .json() again.

Fixed:

fetch("/api/data")
  .then(res => res.json())
  .then(data => {
    console.log(data);  // Already parsed — use it directly
  });

Broken — response is not a fetch Response:

// axios returns parsed data directly, no .json() needed
const response = await axios.get("/api/data");
response.json();  // TypeError: response.json is not a function

// Fixed:
const data = response.data;  // axios puts parsed data in .data

Fix 7: Fix Callback and Higher-Order Function Issues

When passing functions as callbacks, make sure you pass the function, not the result of calling it:

Broken — calling the function instead of passing it:

button.addEventListener("click", handleClick());
// handleClick() is called immediately, and its return value
// (likely undefined) is passed as the listener

Fixed — pass the function reference:

button.addEventListener("click", handleClick);

Broken — wrong method name:

const arr = [1, 2, 3];
arr.forEach(item => {
  console.log(item.toUpperCase());  // TypeError: item.toUpperCase is not a function
  // item is a number, not a string
});

Fixed:

const arr = [1, 2, 3];
arr.forEach(item => {
  console.log(String(item));  // Convert to string first
});

Fix 8: Fix Constructor and Class Issues

Broken — calling a class without new:

class User {
  constructor(name) {
    this.name = name;
  }
}

const user = User("Alice");  // TypeError: Class constructor User cannot be invoked without 'new'

Fixed:

const user = new User("Alice");

Broken — importing a non-default export as a constructor:

// Module exports: export function createUser(name) { ... }
import createUser from "./user.js";  // Wrong — default import

const user = new createUser("Alice");  // TypeError: createUser is not a constructor

Fixed:

import { createUser } from "./user.js";  // Named import
const user = createUser("Alice");  // It's a factory function, not a class

Fix 9: Fix Optional Chaining for Safe Calls

If a function might not exist, use optional chaining:

// Might throw TypeError if onSuccess is undefined
onSuccess(data);

// Safe — only calls if onSuccess is a function
onSuccess?.(data);

Check before calling:

if (typeof onSuccess === "function") {
  onSuccess(data);
}

Optional chaining (?.()) is cleaner for optional callbacks. Use the explicit check when you need to handle the missing function case differently.

Still Not Working?

If you have checked all the fixes above and still get this error:

Check for circular dependencies. If module A imports from module B, and module B imports from module A, one of them might get undefined for the imported function. See Fix: cannot use import statement outside a module for related module issues.

Check for minification issues. Minifiers can rename or remove functions. If the error only appears in production (minified) code, check your build output and source maps.

Check for browser compatibility. Some functions are not available in older browsers. Array.at(), Object.hasOwn(), structuredClone() are relatively new. Check MDN for browser support tables.

Check for prototype pollution. If a library or your own code modifies Object.prototype or Array.prototype, built-in methods might be overwritten. Avoid modifying built-in prototypes.

Check for Web Workers or iframes. Arrays created in a different execution context (iframe, Web Worker) have a different Array constructor. instanceof Array returns false, and methods might not work as expected. Use Array.isArray() instead of instanceof Array.

Use the browser debugger. Set a breakpoint on the line that throws. Inspect the value being called to see exactly what it is and where it came from. The browser’s call stack shows how you got there.

Check ESM vs CommonJS interop. A CommonJS package that exports module.exports = function foo() {} imported with import foo from "pkg" gives you the function. Imported with import * as foo from "pkg" gives you a namespace whose .default is the function — and foo() throws foo is not a function. With Node’s --experimental-vm-modules and tooling like tsx, ts-node, vite-node, and jest --esm, the interop rules differ subtly. If you switched bundlers or runners recently, suspect this.

Check whether a TypeScript-only declaration is masking the truth. A .d.ts file may declare a value as () => Promise<T> while the actual JavaScript export is an object. The TypeScript compile passes, but the runtime call throws. Inspect the actual import at runtime with console.log(typeof imported).

Check tree-shaking and dead-code elimination. Aggressive bundlers (esbuild, Rollup, Turbopack) sometimes mis-classify a re-exported function as unused and drop it. The import resolves to undefined. Disable minification temporarily, repeat the build, and inspect the bundle.

Check whether a service worker is serving a stale chunk. In production SPAs, a service worker can serve an old chunk that no longer matches the current code. Functions that the new code expects do not exist on the old chunk. Hard-refresh, unregister the SW in DevTools (Application → Service Workers → Unregister), and try again.

For TypeScript, the compiler catches most of these errors at compile time. If you are seeing this error in a TypeScript project, check for any types or incorrect type assertions that bypass type checking. See Fix: TypeScript property does not exist on type for related type issues.