I'm trying to implement a Kendo Grid in my Angular application, but I'm encountering the following error when the Kendo Grid component is enabled:
vendor.4add67dadae0cd9152b9.js:16 ERROR Error: Uncaught (in promise): TypeError: Class constructor vA cannot be invoked without 'new'
TypeError: Class constructor vA cannot be invoked without 'new'
at new t (index.js:2890:28)
at new e (index.js:6780:28)
at Sg (core.js:23695:20)
at _g (core.js:23564:22)
at mk (core.js:30653:38)
at Dk (core.js:30969:13)
at Ck (core.js:30888:13)
at mk (core.js:30681:5)
at Dk (core.js:30969:13)
at Ck (core.js:30888:13)
// ... more stack trace
Here's the relevant code:
queue-grid.component.ts:
import { Component, OnInit, OnDestroy, Input, Inject } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';
import { GridDataResult } from '@progress/kendo-angular-grid';
import { SortDescriptor } from '@progress/kendo-data-query';
import { Subscription } from "rxjs/Subscription"
import * as _ from 'lodash';
// ... imports from './queue-list-record.model'
@Component({
selector: "queue-grid",
moduleId: module.id.toString(),
templateUrl: "./queue-grid.component.html",
providers: [
{ provide: Window, useValue: window }
]
})
export class QueueGridComponent implements OnInit, OnDestroy {
// ... component properties
public isLoading: boolean = true;
constructor() {
console.log("Queue Component Constructor");
// ... initialization
this.fetchData();
console.log("constructor end");
}
ngOnInit() {
console.log("Queue Component oninit ");
console.log("Component oninit end");
}
fetchData() {
setTimeout(() => {
this.QueueListData = {
data: [
{ reference: "12345", state: "CA", dueDate: "10/20/2024" },
{ reference: "67890", state: "NY", dueDate: "10/25/2024" },
{ reference: "54321", state: "TX", dueDate: "10/30/2024" }
],
total: 3
};
this.isLoading = false;
}, 2000);
}
ngOnDestroy(): void {
}
}
Relavant parts of queue-grid.component.html:
<div id="dvListData">
<kendo-grid [data]="QueueListData?.data">
<kendo-grid-column field="reference" title="Reference #"> </kendo-grid-column>
<kendo-grid-column field="state" title="State"> </kendo-grid-column>
<kendo-grid-column field="dueDate" title="Due Date"> </kendo-grid-column>
</kendo-grid>
</div>
Relavant parts of Module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GridModule } from '@progress/kendo-angular-grid';
@NgModule({
imports: [
GridModule
],
declarations: [
QueueGridComponent
]
})
export class QueueGridModule { }
package.json:
"@angular/animations": "^10.2.2",
"@angular/common": "^10.2.2",
"@angular/compiler": "^10.2.2",
"@angular/compiler-cli": "^10.2.2",
"@angular/core": "^10.2.2",
"@angular/forms": "^10.2.2",
"@angular/platform-browser": "^10.2.2",
"@angular/platform-browser-dynamic": "^10.2.2",
"@angular/platform-server": "^10.2.2",
"@angular/router": "^10.2.2",
"@angular/upgrade": "^10.2.2",
"@ng-bootstrap/ng-bootstrap": "^8.0.0",
"@progress/kendo-angular-buttons": "^5.0.0",
"@progress/kendo-angular-common": "^1.0.0",
"@progress/kendo-angular-dateinputs": "^4.0.0",
"@progress/kendo-angular-dropdowns": "^4.0.0",
"@progress/kendo-angular-excel-export": "^3.0.0",
"@progress/kendo-angular-grid": "^4.7.3",
"@progress/kendo-angular-inputs": "^6.0.0",
"@progress/kendo-angular-intl": "^2.0.0",
"@progress/kendo-angular-l10n": "^2.0.0",
"@progress/kendo-angular-layout": "^5.1.0",
"@progress/kendo-angular-pdf-export": "^2.0.0",
"@progress/kendo-angular-popup": "^3.0.0",
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-date-math": "^1.3.0",
"@progress/kendo-drawing": "^1.0.0",
"@progress/kendo-file-saver": "^1.0.3",
"@progress/kendo-ooxml": "^1.0.2",
"@progress/kendo-popup-common": "^1.0.0",
"@progress/kendo-theme-default": "^3.0.0",
"@telerik/kendo-draggable": "^1.5.1",
"@telerik/kendo-dropdowns-common": "^1.0.0",
"@telerik/kendo-inputs-common": "^2.2.1",
"@telerik/kendo-intl": "^1.2.0",
"@telerik/kendo-theme-default": "^1.33.4",
"@types/file-saver": "^2.0.0",
"angular-d3-charts": "^4.4.7",
"angular-highcharts": "^10.0.1",
"angular-router-loader": "^0.8.2",
"angular-tree-component": "^8.5.5",
"angular2-template-loader": "^0.6.2",
"bootstrap": "^4.3.1",
"copy-webpack-plugin": "^4.3.1",
"core-js": "^2.6.1",
"file-saver": "^2.0.1",
"hammerjs": "^2.0.8",
"highcharts": "^9.2.2",
"highcharts-stock": "^0.1.7",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.0.0",
"jquery": "^3.2.1",
"jszip": "^3.2.0",
"lodash": "^4.14.172",
"mini-css-extract-plugin": "^0.1.0",
"mobx": "^4.0.1",
"moment": "^2.22.2",
"ngx-file-drop": "^11.0.0",
"ng2-input-autocomplete": "^0.3.5",
"ng2-select": "^2.0.0",
"ngx-smart-popover": "^1.0.4",
"ngx-textarea-autosize": "^2.0.0",
"ngx-toastr": "^13.0.0",
"npm": "^8.5.5",
"raw-loader": "^0.5.1",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.6.7",
"style-loader": "^0.19.1",
"systemjs": "^0.19.39",
"ts-loader": "^6.0.0",
"tslerp": "^1.0.5",
"typescript": ">=3.9.0 <4.1.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"underscore": "^1.12.1",
"webpack-merge": "^4.2.2",
"xlsx": "^0.17.3",
"zone.js": "^0.10.3"
Yet, after a good hours-long research, I couldn't find any solution related to this "Class constructor vA cannot be invoked without 'new'" error within the Kendo Grid and Angular 10 context. Tried updating the TypeScript compiler options in tsconfig.json from es5 to es6 to see if that would resolve any compatibility issues, but the error persisted. I have verified if the @progress/kendo-angular-grid installation is proper and present inside the package.json. I also verified whether all Kendo-based packages are at their latest compatible versions. So, I checked whether my syntax for using Kendo Grid component in my template is correct. Well, it does indeed follow Angular official Kendo UI documentation verbatim. I tried to simplify the grid by removing such features as sorting, paging, and filtering to see if the problem remained with a minimal configuration:. I also checked the node_modules folder to ensure that Kendo UI grid files are present there, free of any apparent install issues. I tried cleaning the npm cache and reinstalling the node_modules to rule out potential package corruption issues. (e.g., npm cache clean --force and npm install)
Any help in resolving this error would be greatly appreciated!
To fix the problem, you can add the following section to your Webpack configuration:
resolve: {
mainFields: ['es2015', 'browser', 'module', 'main']
}
This would ensure that Webpack correctly picks the right module entry points; that could potentially prevent issues from surfacing, possibly those related to class constructors and module loading