How to fix ReferenceError – Super constructor may only be called once in JavaScript?

In JavaScript "ReferenceError: Super constructor may only be called once" error occurs when you call super more than once in a derived class constructor, the super keyword calls the parent class constructor and must be called only once, we can see this error, reasons behind it as well as how to correct it with examples.

Understanding an error

"Super constructor may only be called once" is a message that shows when the super keyword is used more than once in one constructor of a child class, to use “this” keyword, the superclass constructor needs to be specified immediately after calling super.

Case 1: Error Cause: Calling super Multiple Times in Constructor

Example: You will see this error when you are calling the super keyword more than once in a class constructor.

class ParentClass {
  constructor() {
    console.log('Parent class constructor');
  }
}

class ChildClass extends ParentClass {
  constructor() {
    super();
    super(); // Second call to super() causes error
    console.log('Child class constructor');
  }
}

const childInstance = new ChildClass();

Output:

ReferenceError: Super constructor may only be called once

Resolution of error

To avoid such kind of error you should ensure that super is called only once in the constructor of the derived class.

class ParentClass {
    constructor() {
        console.log('Parent class constructor');
    }
}

class ChildClass extends ParentClass {
    constructor() {
        super();
        console.log('Child class constructor');
    }
}

const childInstance = new ChildClass();

Parent class constructor
Child class constructor

Case 2: Error Cause: Conditional Super Calls

Example: When you are using conditional logic which results multiple calls of super can cause this error.

class ParentClass {
    constructor() {
        console.log('Parent class constructor');
    }
}

class ChildClass extends ParentClass {
    constructor(condition) {
        if (condition) {
            super();  // First call to super()
        }
        super();
        // Second call to super(), causes ReferenceError
        console.log('Child class constructor');
    }
}

const childInstance = new ChildClass(true);

Output:

ReferenceError: Super constructor may only be called once

Resolution of error

To avoid such kind of error you should ensure that you are using super only once regardless of the conditional logic.

class ParentClass {
    constructor() {
        console.log('Parent class constructor');
    }
}

class ChildClass extends ParentClass {
    constructor(condition) {
        super(); // Call super() once
        if (condition) {
            console.log('Condition is true');
        } else {
            console.log('Condition is false');
        }
        console.log('Child class constructor');
    }
}

const childInstance = new ChildClass(true);

Parent class constructor
Condition is true
Child class constructor

Conclusion

In conclusion to avoid Super constructor may only be called once errors in JavaScript, make sure you call the super keyword exactly once within a derived class’s constructor, this strictly adheres to JavaScript’s way of inheriting classes thereby ensuring proper initialization of the parent class and how this should function within the derived one.