JavaScript Beginner 14 views

TypeError: X is not a function

The code tries to call a value as a function, but it's not a function.

Explanation

TypeError: X is not a function occurs when you try to call a value that isn't a function. This commonly happens when a variable that should hold a function is actually undefined, null, or a different type. For example, calling a variable that hasn't been assigned, importing a function incorrectly from an ES module, or trying to call a method that doesn't exist on an object. This is different from ReferenceError because the variable exists but its value isn't callable.

Common Causes

Variable is undefined or null
Wrong import/export syntax
Function not defined before use
Method doesn't exist on object
Incorrect ES module import

Solution

Verify the variable actually contains a function using typeof. Check import/export statements for correct syntax. Ensure the function is defined before it's called. For default exports, verify you're importing correctly. Check that the method exists on the object before calling it. Use optional chaining for method calls: obj.method?.(). For ES modules, ensure the named export matches what you're importing.

Code Example

// Variable is not a function
let myFunc;
myFunc();  // TypeError: myFunc is not a function

// Fix: ensure it's defined
let myFunc = () => console.log('hello');
myFunc();

// Wrong import from ES module
import utils from './utils.js';  // imports default export
utils.helper();  // TypeError if helper is not a method on default

// Fix: use named import
import { helper } from './utils.js';
helper();

// Method doesn't exist on object
const obj = { name: 'John' };
obj.greet();  // TypeError: obj.greet is not a function

// Fix: define the method
const obj = {
    name: 'John',
    greet() { return `Hello, ${this.name}`; }
};

// Safe method call
obj.greet?.();  // undefined if greet doesn't exist

Error Information

Language

javascript

Difficulty

Beginner

Views

Related Errors

Frontend

TypeError: X is not a function

Explanation

Common Causes

Solution

Code Example

Error Information

Related Errors

ResizeObserver Loop Limit Exceeded

Unhandled Promise Rejection

Port Already in Use

npm ERESOLVE Unable to Resolve Dependency Tree