Uncaught TypeError: Super expression must be a constructor
Overview
This JavaScript error occurs when using the super keyword incorrectly while extending a class. The error typically happens in ES6+ class-based inheritance when the superclass is not a valid constructor function or when it’s undefined.
1. Understanding the Error
Error Message
Uncaught TypeError: Super expression must be a constructor
This message indicates that JavaScript expected the superclass (parent class) to be a function (constructor) but instead received undefined, null, or a non-function value.
2. Common Causes and Fixes
Case 1: Incorrect Superclass Reference
If the class being extended is undefined or not a constructor, JavaScript cannot call super(), causing this error.
Example of the Error
class Parent {} // Correct superclass
class Child extends parent { // Wrong: 'parent' is not defined
constructor() {
super();
}
}
Fix: Correct Superclass Name
Ensure the superclass name matches the actual class definition:
class Parent {}
class Child extends Parent {
constructor() {
super(); // Works correctly
}
}
Case 2: Superclass is Undefined
If you forget to import the superclass or define it incorrectly, the class will be undefined, causing this error.
Example of the Error
import { MissingParent } from './Parent.js'; // Missing or incorrect import
class Child extends MissingParent {
constructor() {
super();
}
}
Fix: Ensure Correct Imports
Make sure the superclass is correctly imported:
import { Parent } from './Parent.js';
class Child extends Parent {
constructor() {
super();
}
}
Case 3: Extending a Non-Constructor
If you try to extend something that is not a function (e.g., an object or a primitive), it will fail.
Example of the Error
const Parent = {}; // Objects are not constructors
class Child extends Parent {
constructor() {
super();
}
}
Fix: Ensure Superclass is a Constructor
Make sure Parent is an actual class or function:
class Parent {}
class Child extends Parent {
constructor() {
super();
}
}
Case 4: Incorrect Class Export
If a class is not properly exported, it may be undefined when imported.
Example of the Error
// Parent.js
export default class { } // No class name provided
// Child.js
import Parent from './Parent.js';
class Child extends Parent {
constructor() {
super();
}
}
Fix: Properly Name and Export the Class
// Parent.js
export default class Parent { }
// Child.js
import Parent from './Parent.js';
class Child extends Parent {
constructor() {
super();
}
}
Case 5: Using Super in a Non-Class Context
Calling super() outside a class constructor results in an error.
Example of the Error
function example() {
super(); // Invalid: super is only used inside classes
}
Fix: Only Use super() Inside Class Constructors
Ensure super() is only used within a subclass constructor.
3. Summary of Fixes
| Issue | Fix |
|---|---|
| Superclass name is incorrect | Ensure the correct name is used |
| Superclass is undefined | Define or correctly import the superclass |
| Extending a non-constructor | Use a valid class or function |
| Improper class export/import | Export and import the class correctly |
Using super() outside a class | Use it only inside class constructors |
4. Best Practices
- ✅ Always define the superclass before extending it.
- ✅ Ensure correct import/export when using modules.
- ✅ Use meaningful names for classes and follow naming conventions.
- ✅ Make sure the superclass is a valid constructor.
- ✅ Use
super()inside class constructors only.
Following these steps will prevent the "Uncaught TypeError: Super expression must be a constructor" error and ensure smooth class inheritance in JavaScript.