The attempt to create a new instance of 'XMLHttpRequest' failed because the constructor requires the 'new' operator to be used. This DOM object cannot be invoked as a function

Question

The attempt to create a new instance of 'XMLHttpRequest' failed because the constructor requires the 'new' operator to be used. This DOM object cannot be invoked as a function

export default class CustomPromise extends XMLHttpRequest {
    constructor(url: string, type: string) {
        super();
        config.url = url;
        config.requestType = type;
    }
}

In this code snippet, a custom promise class is created by extending the XMLHttpRequest. An instance of this class is then attempted to be created as shown below.

let customProm = new CustomPromise('api/200', 'get');

However, upon calling the super method, the following error was encountered:

Failed to construct 'XMLHttpRequest': Please use the 'new' operator, this DOM object constructor cannot be called as a function

typescript constructor xmlhttprequest

Answer 1

Answer №1

It seems like the issue arises because the XMLHttpRequest object is a hosted object, and sometimes it behaves erratically when extended.

Fortunately, this behavior changes when you extend it using ES6 classes.
After compiling the following code:

class RequestPromise extends XMLHttpRequest {
    constructor() {
        super();
    }
}

When transpiled to ES5, it becomes:

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var RequestPromise = (function (_super) {
    __extends(RequestPromise, _super);
    function RequestPromise() {
        _super.call(this);
    }
    return RequestPromise;
}(XMLHttpRequest));

However, if you compile it with target set to ES6, the class remains unchanged:

class RequestPromise extends XMLHttpRequest {
    constructor() {
        super();
    }
}

If you give it a try, it should function properly without any issues.

Answer 2

It seems like the issue arises because the XMLHttpRequest object is a hosted object, and sometimes it behaves erratically when extended.

Fortunately, this behavior changes when you extend it using ES6 classes.
After compiling the following code:

class RequestPromise extends XMLHttpRequest {
    constructor() {
        super();
    }
}

When transpiled to ES5, it becomes:

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var RequestPromise = (function (_super) {
    __extends(RequestPromise, _super);
    function RequestPromise() {
        _super.call(this);
    }
    return RequestPromise;
}(XMLHttpRequest));

However, if you compile it with target set to ES6, the class remains unchanged:

class RequestPromise extends XMLHttpRequest {
    constructor() {
        super();
    }
}

If you give it a try, it should function properly without any issues.

Answer 3

Answer №2

Using XMLHttpRequest simplifies the process of sending HTTP requests. With just a few lines of code, you can create an instance of the object, specify a URL, and send the request.

var request = new XMLHttpRequest();

Answer 4

Using XMLHttpRequest simplifies the process of sending HTTP requests. With just a few lines of code, you can create an instance of the object, specify a URL, and send the request.

var request = new XMLHttpRequest();

The attempt to create a new instance of 'XMLHttpRequest' failed because the constructor requires the 'new' operator to be used. This DOM object cannot be invoked as a function

Answer №1

Answer №2

Similar questions

Double Calling of Angular Subscription

Steps to showcase a visual element using an interceptor

Updating TypeScript interface based on a generic value

What can be done to prevent the angular material select from overflowing the screen?

Using TypeScript to type styled-system props

Transferring data between arrays in TypeScript depending on a specified condition

The type 'Store<unknown, AnyAction>' is lacking the properties: dispatch, getState, subscribe, and replaceReducer

Error in Angular2: The provided parameters do not match any of the available function signatures

React Hook: Child Component's onComplete Callback Cannot Call Parent Component's Dispatch

Reset Angular's virtual scroll to the beginning of the list

This error occurs when trying to assign a value to a property of a variable that is currently undefined

Creating a JSON file using an object to send requests in Angular

Tips for patiently awaiting data before constructing an object

When utilizing <number | null> or <number | undefined> within computed() or signals(), it may not function properly if the value is 0

The functionality of an Angular application may be compromised if the necessary modules are not properly imported into

Tips for utilizing the patchValue method within a dynamic FormArray in Angular

What is the best way to design functions that can return a combination of explicit types and implicit types?

What could be the reason for Jest running my TypeScript test twice and consistently failing one of the runs?

Enabling or Disabling Inputs in Angular

Use RXJS to prevent having multiple nested subscriptions