Error Message: ES5 mandates the use of 'new' with Constructor Map

Below is the code snippet:

export class ExtendedMap<T, U> extends Map {
        constructor() {
            super();
        }
    
        toggle(key: T, value: U) {
            if (this.has(key)) {
                super.delete(key);
            } else {
                super.set(key, value);
            }
        }
    
        has(key: T): boolean {
            return super.has(key);
        }
    }
    

An error occurs during ES5 compilation:

ERROR TypeError: Constructor Map requires 'new'

This code is used as follows:

public registryLayers = new ExtendedMap<number, any>();
    

Here is a snippet with TypeScript parts commented out:

/*export*/ class ExtendedMap/*<T, U>*/ extends Map {
                constructor() {
                    super();
                }
            
                toggle(key/*: T*/, value/*: U*/) {
                    if (this.has(key)) {
                        super.delete(key);
                    } else {
                        super.set(key, value);
                    }
                }
            
                has(key/*: T*/)/*: boolean*/ {
                    return super.has(key);
                }
            }
            /*public*/ registryLayers = new ExtendedMap/*<number, any>*/();
            console.log("Worked without error");

Answer №1

If you're targeting ES5 with TypeScript, you may encounter complaints about the use of Map. This can be seen in this example.

When TypeScript generates code for an ES5 environment and you overlook these errors, you might run into issues where TypeScript is trying to use Map as a traditional constructor function instead of a modern class syntax. In your ExtendedMap constructor, it attempts to call Map incorrectly:

return _super.call(this) || this; // Where `_super` refers to `Map`

In contemporary environments, Map is defined as a class constructor and cannot be invoked in that manner, leading to the reported error.

To ensure compatibility with older ES5 environments, it's essential to include a polyfill for Map since it wasn't available in ES5. This allows for correct usage via .call. Even in modern environments supporting Map, the polyfill remains necessary due to the calling mechanism.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alert: React-Weather is causing an invalid element type in React

I am feeling overwhelmed. I have created a custom component called react-weather which has been installed using npm. Here is the code snippet for my self-written Weather.js component located in the src/components folder: import React, { Component } from & ...

Angular Sending JSON Data via POST Request

Whenever I submit an empty form through my Angular application, the JSON being sent is as follows: {foo: {}} This causes a 500 error to occur on my server instead of the expected 422 error, since the server requires the following structure: {foo: {bar: ...

Using importXML with Internet Explorer 11

My project website includes a roster page that retrieves XML data. Previously, this functionality worked across all browsers but now it only works in Chrome. In IE11, it seems that the importXML function is not functioning correctly as the roster data is m ...

The SvelteKit server successfully loaded data, displaying it on the sources/index page in the Chrome

I am currently in the process of developing a basic web application that utilizes self-hosted Pocketbase on the backend and SvelteKit as a meta framework. Recently, I discovered that the data loaded by my server is visible in the browser's sources/in ...

When an image in AngularJS is clicked, it should display a corresponding list

I'm brand new to Angular development. This is my very first solo project. My goal is to design a page where clicking on an image will display a list of items below it. For example, check out this link for reference: I've searched online for so ...

Combining PHP with the power of Jquery for seamless integration

I am in the process of developing a feature where, upon clicking a button using Jquery, it triggers a function to display images on the existing page. I aim for this function to remain active even when the user navigates to a different page via hyperlink, ...

Can we streamline a generic overloaded function's signature to make it more concise?

I have developed a streamlined Axios wrapper function that integrates zod-parsing and presents a discriminated union for improved error handling. While the implementation successfully maintains the default behavior of Axios to throw errors in certain cas ...

Node.js application experiences a crash upon entering incorrect credentials

Would you mind reviewing my Login Function? After entering incorrect credentials, a response is sent but unfortunately the app crashes The versions I am using are Express ^4.17.2 and Node.js v16.14.0 router.post( "/login", [ body(" ...

The data is successfully being logged in the console but is not appearing on the page in Reactjs

I'm currently working on Reactjs with the Next.js framework. I'm trying to fetch data using axios, but the data isn't showing up on the page. However, when I check the console.log in the getStaticProps section (in blogs), the data is there. ...

Create a configuration featuring filter options similar to Notion's functionality

The objective is to create a system that can establish certain constraints, similar to the way Notion handles filter properties. https://i.sstatic.net/plctW.png System A sets up the constraints and System C evaluates them, both using Typescript. However, ...

Ways to target only the adjacent div

My goal is to target only the next div with the class name indented. Each indented div should have the same id as the <li> element right before it. Currently, I want each div with the class name indented to have the id of the previous <li>. He ...

Stopping a requestAnimationFrame recursion/loop: Tips and Tricks

I am developing a game using Three.js with the WebGL renderer that goes into fullscreen mode when a play link is clicked. To handle animations, I utilize the requestAnimationFrame method. The initialization of the animation process looks like this: self. ...

Unable to delete a row from a dynamically generated table using jQuery

I am currently working on a project that involves creating a table based on results from a servlet. The table includes checkboxes, and when a checkbox is checked, a button at the bottom of the table should appear. This button calls a remove function to del ...

The custom server was functioning properly, but as soon as I altered the file directory, an error occurred on Next.js

After creating "create-next-app," I successfully set up the folder structure as follows: +client2 --.next --node_modules --public --... --server.js However, when I move my "server.js" file to a different location: +client2 --.next --no ...

I need assistance setting up a Facebook page feed using Angular.js. I want to display the posts in a list of cards and include a fullscreen image gallery. Is

Hey there! I'm in the process of developing an app that pulls Facebook page posts and showcases them with custom CSS. The app is functioning smoothly with two controllers, DashCtrl and MainCtrl, each working fine on its own. However, when trying to tr ...

Parsing errors occurred when using the ngFor template: Parser identified an unexpected token at a specific column

In my Angular CLI-built application, I have a component with a model named globalModel. This model is populated with user inputs from the previous page and displayed to the user in an HTML table on the current page. Here's how it's done: <inp ...

Problem with Layering in Javascript Canvas Game using Kinetic JS

Currently, I am attempting to replicate the game found at and delving into html5 canvas and kineticJS for my study. Here is the link to my fiddle: http://jsfiddle.net/2WRwY/7/ The issues I am facing are as follows: The tail part of the player in the f ...

basic computation of whole and decimal values using jquery

I'm having trouble multiplying 2 values in my code where the quantity is an integer and credit price is a decimal number. However, when I run the script, nothing seems to happen. Can someone please help me identify and resolve this issue? Any insight ...

Guide to automatically loading a default child route in Angular 1.5 using ui-router

Hello, I am looking to set a default child route to load as soon as the page loads. Below is the code snippet: $stateProvider.state('userlist', { url: '/users', component: 'users', data:{"name":"abhi"}, resolv ...

We apologize, but the module you are looking for cannot be found: Unable to locate 'fs'

Trying to create a new MDX blog website using Next.js 13 with the latest app router, but encountering an error message saying "Module not found: Can't resolve 'fs'". It was working fine in Next.js 12 and pages directory, but not in the lates ...