The following error has occurred: TypeError - It is not possible to call the class constructor EventEmitter_ without using the keyword 'new

Since upgrading to Angular 10, I've encountered a specific error with some components:

ERROR TypeError: Class constructor EventEmitter_ cannot be invoked without 'new'
    at new ZoneAwareEventEmitter (index.js:34)
    at new GridComponent (index.js:6167)
    at createClass (core.js:21921)
    at createDirectiveInstance (core.js:21790)
    at createViewNodes (core.js:30281)
    at callViewAction (core.js:30597)
    at execComponentViewsAction (core.js:30516)
    at createViewNodes (core.js:30309)
    at callViewAction (core.js:30597)
    at execComponentViewsAction (core.js:30516)

The code snippet causing this issue is as follows:

import { EventEmitter } from "@angular/core";

export class ZoneAwareEventEmitter extends EventEmitter {
    constructor(ngZone, isAsync = false) {
        super(isAsync);
        this.ngZone = ngZone;
    }
}

Any insights on what could be missing here?

Appreciate any assistance you can provide! Thanks!

angulartypescriptecmascript-6angular-storybook

Answer №1

Here's a tip for your Webpack configuration:

resolve: {
    mainFields: ['es2015', 'browser', 'module', 'main']
},

If you're encountering issues with Webpack builds in projects that utilize the Kendo Angular Grid, it could be due to how the default Webpack setup resolves the fesm5 module from 

node_modules/@progress/kendo-angular-grid
. This module attempts to extend the EventEmitter class using es5, leading to errors. By adjusting the mainFields property within the resolve section of your Webpack config to prioritize es2015 modules, this issue can be resolved.

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

Getting the previous result in an observable using an interval - here's how!

Can someone help me with accessing the previous value of an observable within a Pipe observable that uses an interval? The code example is provided below: const imageStatus = interval(5000) this.statusSubscription = imageStatus.pipe( startWith(0), pair ...

angularrxjsobservable

The process of inserting data into MongoDB using Mongoose with TypeScript

Recently, I encountered an issue while trying to insert data into a MongoDB database using a TypeScript code for a CRUD API. The problem arises when using the mongoose package specifically designed for MongoDB integration. import Transaction from 'mon ...

node.jstypescriptmongodbmongoosemongoose-schema

Angular project service file experiencing issues with TypeScript string interpolation functionality

Here is the code snippet for a service in an Angular project: @Injectable() export class FetchDataService { fetch(link){ console.log('This is a ${link}'); } } In my component, I am invoking this method with a string parameter. Upon che ...

angulartypescriptstring-interpolation

When compiling in Visual Studio 2019, the process terminated with exit code -1073741819

Today, upon returning to my asp .net core-project with react and typescript as front end, I encountered an error message after running the "Build" command. Can anyone shed some light on what this error means and how it can be fixed? Severity Code De ...

typescriptvisual-studio-2019

How to delete an item from an object in TypeScript

Can you help with filtering an object in Angular or TypeScript to eliminate objects with empty values, such as removing objects where annualRent === null? Additionally, what method can we use to round a number like 2.833333333333335 to 2.83 and remove the ...

typescript

Using Kendo PanelBarItem to incorporate a personalized component as a child element

I was looking to design a component with PanelBarItems in its template. However, I'm facing issues and it doesn't seem to be working. Any suggestions? Main Component: import { Component } from '@angular/core'; @Component({ selecto ...

angularkendo-ui-angular2

Accessing data from an object of type Request in NodeJS using Typescript

Is there a way for me to retrieve req.kauth.grant It is definitely populated because when I print req, I see this: kauth: { grant: Grant { access_token: [Token], refresh_token: undefined, id_token: undefined, token_type: undefi ...

node.jstypescript

What are the potential reasons behind an Uncaught TypeError arising from an Object Prototype in the AOT build, but not in the development environment?

I've successfully created an Angular application that works flawlessly in the development environment. However, I recently transferred it to a sandbox server and after running ng build with the necessary parameters for base-href and environment, I enc ...

angularng-build

Anticipated the object to be a type of ScalarObservable, yet it turned out to be an

When working on my Angular project, I utilized Observables in a specific manner: getItem(id): Observable<Object> { return this.myApi.myMethod(...); // returns an Observable } Later, during unit testing, I successfully tested it like so: it(&apos ...

typescriptjasminerxjsangular-observableangular-test

The API Gateway LogGroup is experiencing duplication issues and lacks critical details

I've been encountering difficulties setting up CloudWatch logs for my RestApi using cdk. Here is the code I'm using: const logGroup = new LogGroup(this, `apiLogs`, { logGroupName: `apiLogs`, retention: RetentionDays.ONE_WEEK }); ...

typescriptamazon-web-servicesrestaws-api-gatewayaws-cdk

Adding animation to rows in ngx-datatable: A Guide

I am looking to stack the rows of my data table (ngx) one after the other in a vertical fashion. I want to incorporate [@datatableAnimation], but I'm unsure where to place it. When adding it to <ngx-datatable [@datatableAnimation]>, it only af ...

angulartypescriptngx-datatable

Dynamic resizing of grids using React and TypeScript

I'm attempting to create a dynamic grid resizing functionality in React and TypeScript by adjusting the lgEditorSize value on onClick action. Setting the initial lgEditorSize value const size: any = {}; size.lgEditorSize = 6; Adjusting the lgEditorS ...

javascriptcssreactjstypescriptbootstrap-4

Accordion's second child element experiencing issues with grid properties

I have set the parent element display:"Grid" and specified the gridColumnStart for my child elements as shown below. It seems to be working correctly for the first child element, but not for the second one. Please find my code attached: return ( ...

reactjstypescriptmaterial-uigridaccordion

Exploring the Flow of Angular 5 HttpInterceptor

Implementing HttpInterceptor in one of my Angular applications to display a spinner for every request has been successful. However, I have encountered an issue with displaying an Error modal using a notificationService that utilizes SweetAlert. The code sn ...

angularangular-http-interceptors

Navigating back in an Async Function within Angular

I am encountering an issue while trying to incorporate an if else condition within my async function in Angular. To prevent the error, I am required to include a return statement in my async function. https://i.sstatic.net/2foil2jM.png asyncFunction: (v ...

angularif-statementasynchronous

Switching between PascalCase and camelCase in TypeScript leads to unexpected behavior

Currently, I am in the process of transitioning a C# desktop application to an Angular/TypeScript web application. In the C# application, all class properties are named using PascalCase. Therefore, I decided to maintain this naming convention in the TypeS ...

arraysangulartypescriptcamelcasingpascalcasing

Get your hands on a complimentary Angular 2 scheduling tool

I am in need of integrating a scheduler into my angular 2 application. My goal is to schedule various employees within a day view and I found two paid components that might work for me: FullCalendar Scheduler Demo Bryntum Angular 2 Scheduler Currently, ...

angularcomponentsscheduler

Modifying column array properties using jsstore

I am working with a jsstore table called tblInvoice const tblInvoice: ITable = { name: "invoice", columns: { // Here "Id" is name of column id: { autoIncrement: true, primaryKey: true, notNull: false }, branchId: { ...

javascriptsqlangulartypescript

Converting Javascript tools into Typescript

I'm currently in the process of migrating my Ionic1 project to Ionic2, and it's been quite an interesting journey so far! One challenge that I'm facing is how to transfer a lengthy list of utility functions written in JavaScript, like CmToFe ...

javascriptangulartypescriptionic2ionic3

What are the steps to setting up a basic Material UI Select component with React and Typescript?

I'm struggling to make the most basic Material UI Select work in React using Typescript. After spending three hours searching, I couldn't find an example that clearly explains how to set the label or placeholder for the Select component (I review ...

reactjstypescriptselectmaterial-ui