TypeError: undefined is not a function — How to Fix It

“TypeError: undefined is not a function.” You’re calling something as a function, but it’s undefined. This is one of the most common JavaScript errors — and AI generates it constantly.

The error means: something you expected to be a function (and called with ()) doesn’t exist. The variable is undefined, so JavaScript can’t execute it.

---

What This Error Actually Means

const doSomething = undefined;
doSomething();  // 💥 TypeError: doSomething is not a function

You’re using () to call something, but that something is undefined. JavaScript is saying: “I can’t call undefined — it’s not a function.”

Common Variations

TypeError: undefined is not a function
TypeError: X is not a function
TypeError: object.method is not a function
TypeError: callback is not a function

---

5 Common Causes

1. Wrong Import / Named Export

AI imported something that doesn’t exist in the module.

// AI wrote:
import { useAuth } from './auth';
useAuth();  // 💥 if 'auth.js' doesn't export 'useAuth'

// Check what's actually exported:
// auth.js exports: export default function AuthProvider() {...}
// Not a named export!

// Fix — use default import:
import AuthProvider from './auth';

// Or check exports:
// Maybe it's: export function useAuthentication() {...}
import { useAuthentication } from './auth';

2. Method Doesn’t Exist on Object

AI used a method that doesn’t exist, or misspelled it.

// AI wrote:
const items = [1, 2, 3];
items.flatmap(x => [x, x * 2]);  // 💥 not a function

// Fix — correct capitalization:
items.flatMap(x => [x, x * 2]);  // ✅ JavaScript is case-sensitive

// Another common one:
document.getElementByID('app');     // 💥 wrong
document.getElementById('app');     // ✅ correct

3. Callback Not Passed

A function expects a callback but it wasn’t provided.

// AI wrote a component that calls an onSubmit prop:
function Form({ onSubmit }) {
  return <button onClick={() => onSubmit(data)}>Submit</button>;
}

// But parent didn't pass it:
<Form />  // 💥 onSubmit is undefined

// Fix — default parameter or guard:
function Form({ onSubmit = () => {} }) {  // default no-op
  return <button onClick={() => onSubmit(data)}>Submit</button>;
}

// Or guard:
<button onClick={() => onSubmit?.(data)}>Submit</button>

4. Wrong Array/Object Destructuring

AI destructured something that doesn’t match the actual shape.

// AI wrote:
const { data, setData } = useState([]);
// 💥 useState returns an array, not an object!

// Fix — use array destructuring:
const [data, setData] = useState([]);

// Another common one:
const { map, filter } = someArray;  // 💥 these are methods, not properties

5. this Context Lost

AI wrote class-based or event handler code that lost its this binding.

// AI wrote:
class Timer {
  constructor() {
    this.seconds = 0;
    setInterval(this.tick, 1000);  // 💥 'this' is wrong inside tick
  }
  tick() {
    this.seconds++;  // 'this' is undefined or window
  }
}

// Fix — arrow function or bind:
class Timer {
  constructor() {
    this.seconds = 0;
    setInterval(() => this.tick(), 1000);  // ✅ arrow preserves 'this'
  }
  tick() {
    this.seconds++;
  }
}

---

Step-by-Step Fix Process

Step 1: Identify What’s Undefined

The error usually says what you tried to call. Check the stack trace for the exact line:

TypeError: onSubmit is not a function
    at Form (src/components/Form.jsx:8:5)

Line 8 of Form.jsx — something called onSubmit that’s undefined.

Step 2: Log the Value

console.log('onSubmit:', onSubmit, typeof onSubmit);
// Output: "onSubmit: undefined undefined"
// Now you know — it was never passed to this component

Step 3: Trace Where It Should Come From

• Import? Check the source file’s exports
• Prop? Check the parent component
• Method? Check the object/library documentation
• Callback? Check who’s supposed to pass it

Step 4: Apply the Fix

Root Cause	Fix
Wrong import	Fix import name / use default import
Misspelled method	Fix spelling (JS is case-sensitive)
Missing prop	Add default value or optional chaining
Wrong destructuring	Array [] vs Object {}
Lost this	Use arrow functions or .bind()

---

React-Specific Fixes

// Always provide default props for callbacks
function Button({ onClick = () => {}, label = 'Click' }) {
  return <button onClick={onClick}>{label}</button>;
}

// Use optional chaining for optional callbacks
function Card({ onHover }) {
  return <div onMouseEnter={() => onHover?.()}>Content</div>;
}

// Don't call hooks conditionally (causes wrong destructuring)
// ❌ if (condition) { const [state, setState] = useState(); }
// ✅ const [state, setState] = useState(); // always call

---

🤖 Prompt to Fix This

I'm getting "TypeError: undefined is not a function" in my JavaScript/React code:

[PASTE THE FULL ERROR WITH STACK TRACE]

Here's the relevant code:

[PASTE THE CODE]

And here's where the function/value should come from:

[PASTE THE IMPORT, PARENT COMPONENT, OR SOURCE]

Please:
1. Identify exactly what's undefined and why
2. Show me the correct import/usage
3. Add defensive checks to prevent this error
4. Check if there are similar issues elsewhere in this code

---

Prevention Tips

1. Use TypeScript — it catches “not a function” errors at compile time
2. Always provide default props — { onClick = () => {} } prevents undefined callbacks
3. Use optional chaining for method calls — obj.method?.() is safe
4. Check imports immediately — hover over imports in VS Code to verify they resolve
5. Use array destructuring for hooks — const [x, setX] not const { x, setX }

---

Related Resources

• 🧙 Debug Wizard — Paste your error for AI-powered fix suggestions
• 📖 How to Fix TypeError — General TypeError guide
• 📖 Debugging with AI — Systematic debugging workflow
• 📋 Common Errors Cheatsheet — Quick reference for frequent errors