JavaScript errorTypeError: “x is not a function”

Why the value is not a function, and the fix

1. 01

   Calling an array method on something that is not an array

   “For example, JavaScript Objects have no map function, but the JavaScript Array object does.” MDN, TypeError: "x" is not a function

   map, filter, forEach and find exist on arrays only. API responses often wrap the list in an object ({ data: [...] }), return an object keyed by id, or send null when empty. Log the value and use the array inside it, or convert an object with Object.values(). A missing await gives a Promise instead of data (res.json().map fails), and array-likes such as querySelectorAll() results, Set, Map and arguments need Array.from(x) before map.

   const res = await fetch('/api/orders');
   const body = await res.json();
   const orders = Array.isArray(body) ? body : body.orders ?? [];
   orders.map((o) => o.id);

2. 02

   A typo or wrong case in the name

   “Maybe there is a typo in the function name? Maybe the object you are calling the method on does not have this function?” MDN, TypeError: "x" is not a function

   JavaScript names are case sensitive, and a misspelled method is simply undefined. Compare the name with the documentation of the library or API, letter by letter.

3. 03

   The import does not match the export

   “Ensure you are importing the module correctly.” MDN, TypeError: "x" is not a function

   If a module uses export default, import it without braces; if it uses a named export, import it with braces and the same name. With a bundler or CommonJS interop, mixing them gives you undefined or the whole module object, and calling it fails; native ES modules fail earlier with a SyntaxError such as “does not provide an export named”. Some CommonJS packages also need .default when imported into ES modules.

   // helpers.js
   export default function formatPrice() {}
   export function slugify() {}
   
   // app.js
   import formatPrice, { slugify } from './helpers.js';

4. 04

   A callback lost its this, or a name is reused

   Passing a class method as a callback (onClick={this.handleClick}, setTimeout(obj.run)) detaches it from its object. Inside a class this is then undefined, so you usually see "Cannot read properties of undefined (reading 'setState')"; if the callback runs with another object as this (a jQuery or DOM event handler), you see "this.setState is not a function". Use an arrow function or bind it in the constructor. A property and a method with the same name also clash: the property wins, so the method looks missing.

   class Form extends React.Component {
     handleSubmit = () => {
       this.setState({ sent: true });
     };
   }

Checked against the vendor’s docs on November 7, 2026: MDN: TypeError: "x" is not a function.

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

• from $450App Fix TicketOne reproducible bug in an existing mobile or web app, diagnosed and fixed.See scope and start
• from $450AI-Built App RescueA Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.See scope and start

Related: “Cannot read properties of undefined” · “Cannot use import statement outside a module” · React “Invalid hook call”