- Home
- Forum
- JavaScript - EJ 2
- Webpack errors with TreeGrid
Webpack errors with TreeGrid
UPDATE
It seems like this might be a problem using Gantt, Grid and TreeGrid on the same page. I have found a workaround using the Gantt chart which will not require the TreeGrid anymore. However, it's still important to understand the below problem I think.
I've been struggling for days now with problems with Syncfusion compiling with Webpack, especially the TreeGrid control.
Firstly, I'm experiencing a lot of bugs with TreeGrid which I don't experience running pure JS without webpack. Problems like the data source not updating if the grid changes, drag and dropping malfunctioning, children tasks disappearing in data source and crazy things like that.
However, most of the time TreeGrid does not work when compiled with my webpack. Note that I've been using other Syncfusion components such as Gantt and other controls without any issues. My problems started using the TreeGrid.
Basically when I compile and run the web application I get this error which crashes the entire Webpack js file:
Uncaught TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf (
at extendStatics (bundle.js:140535)
at __extends (bundle.js:140538)
at bundle.js:140556
at Module../node_modules/@syncfusion/ej2-grids/src/grid/renderer/header-cell-renderer.js (bundle.js:140759)
at __webpack_require__ (bundle.js:240009)
at Module../node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js (bundle.js:142167)
at __webpack_require__ (bundle.js:240009)
at Module../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js (bundle.js:127835)
at __webpack_require__ (bundle.js:240009)
What makes this confusing is by shuffling some code around the errors go away but I experience bugs with the control which should not be there. However, continuing development I will run into this error again at some point and then struggle for hours to get rid of it.
So my question is this, was this problem experienced before ? How can I fix this ? Can you give me an example of a project using Syncfusion with vanilla webpack? Maybe there are some config problems in my webpack file. Here are my webpack file settings with sample app that crashes:
Webpack config
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//const CopyWebpackPlugin = require('copy-webpack-plugin');
//const WebpackObfuscator = require('webpack-obfuscator');
module.exports = {
entry: './js/index.js',
mode: 'development',
devtool: false,
output: {
filename: '../static/analyticsApp/js/bundle.js',
path: path.resolve(__dirname, ''),
},
module: {
rules: [{
test: /\.(scss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', {
loader: "sass-loader",
options: {
sassOptions: {
includePaths: ["./node_modules/@syncfusion"]
},
},
}]
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
url: false
}
},
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '../static/analyticsApp/css/bundle.css',
}),
// new WebpackObfuscator({rotateStringArray: true, reservedStrings: [ '\s*' ]}, [])
]
};
Sample app:
/*jshint esversion: 10 */
//@ts-check
import {
TreeGrid,
Toolbar,
Edit,
RowDD,
Selection
} from '@syncfusion/ej2-treegrid';
export default class Test {
constructor() {
let thiss = this;
TreeGrid.Inject(Toolbar, Edit, RowDD, Selection);
this.actions = this.getData();
this.actionsGrid = new TreeGrid({
dataSource: this.actions,
actionComplete: function (args) {
console.log(thiss.actions);
},
allowRowDragAndDrop: true,
allowSelection: true,
selectionSettings: {
type: 'Multiple',
},
childMapping: 'subtasks',
height: 700,
treeColumnIndex: 1,
allowPaging: false,
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
mode: 'Row',
newRowPosition: 'Below',
},
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
columns: [{
field: 'taskID',
headerText: 'Task ID',
width: 70,
textAlign: 'Right',
isPrimaryKey: true,
},
{
field: 'taskName',
headerText: 'Task Name',
width: 200,
textAlign: 'Left',
},
{
field: 'startDate',
headerText: 'Start Date',
width: 90,
textAlign: 'Right',
type: 'date',
format: 'yMd',
},
{
field: 'endDate',
headerText: 'End Date',
width: 90,
textAlign: 'Right',
type: 'date',
format: 'yMd',
},
{
field: 'duration',
headerText: 'Duration',
width: 80,
textAlign: 'Right',
},
{
field: 'progress',
headerText: 'Progress',
width: 80,
textAlign: 'Right',
},
{
field: 'priority',
headerText: 'Priority',
width: 90
},
],
});
this.actionsGrid.appendTo('#actions');
}
getData() {
let sampleData = [{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
designation: 'Vice President',
employeeID: 1,
subtasks: [{
taskID: 2,
taskName: 'Plan timeline',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
duration: 5,
progress: 100,
priority: 'Normal',
approved: false,
designation: 'Chief Executive Officer',
employeeID: 2
},
{
taskID: 3,
taskName: 'Plan budget',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
duration: 5,
progress: 100,
priority: 'Low',
approved: true,
designation: 'Chief Executive Officer',
employeeID: 3
},
{
taskID: 4,
taskName: 'Allocate resources',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
duration: 5,
progress: 100,
priority: 'Critical',
approved: false,
designation: 'Chief Executive Officer',
employeeID: 4
},
{
taskID: 5,
taskName: 'Planning complete',
startDate: new Date('02/07/2017'),
endDate: new Date('02/07/2017'),
duration: 0,
progress: 0,
priority: 'Low',
approved: true,
designation: 'Chief Executive Officer',
employeeID: 5
}
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
approved: false,
designation: 'Vice President',
employeeID: 6,
subtasks: [{
taskID: 7,
taskName: 'Software Specification',
startDate: new Date('02/10/2017'),
endDate: new Date('02/12/2017'),
duration: 3,
progress: 60,
priority: 'Normal',
approved: false,
designation: 'Sales Representative',
employeeID: 7
},
{
taskID: 8,
taskName: 'Develop prototype',
startDate: new Date('02/10/2017'),
endDate: new Date('02/12/2017'),
duration: 3,
progress: 100,
priority: 'Critical',
approved: false,
designation: 'Sales Representative',
employeeID: 8
},
{
taskID: 9,
taskName: 'Get approval from customer',
startDate: new Date('02/13/2017'),
endDate: new Date('02/14/2017'),
duration: 2,
progress: 100,
priority: 'Low',
approved: true,
designation: 'Sales Representative',
employeeID: 9
},
{
taskID: 10,
taskName: 'Design Documentation',
startDate: new Date('02/13/2017'),
endDate: new Date('02/14/2017'),
duration: 2,
progress: 100,
priority: 'High',
approved: true,
designation: 'Sales Representative',
employeeID: 10
},
{
taskID: 11,
taskName: 'Design complete',
startDate: new Date('02/14/2017'),
endDate: new Date('02/14/2017'),
duration: 0,
progress: 0,
priority: 'Normal',
approved: true,
designation: 'Sales Representative',
employeeID: 11
}
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 66,
designation: 'Vice President',
employeeID: 12,
subtasks: [{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
progress: 50,
duration: 11,
designation: 'Sales Representative',
employeeID: 13,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
progress: 10,
approved: false,
designation: 'Sales Representative',
employeeID: 14,
subtasks: [{
taskID: 15,
taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'),
duration: 3,
progress: '50',
priority: 'High',
approved: false,
designation: 'Sales Representative',
employeeID: 15
},
{
taskID: 16,
taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'),
duration: 3,
progress: '50',
priority: 'Low',
approved: true,
designation: 'Sales Representative',
employeeID: 16
},
{
taskID: 17,
taskName: 'Testing',
startDate: new Date('02/20/2017'),
endDate: new Date('02/21/2017'),
duration: 2,
progress: '0',
priority: 'Normal',
approved: true,
designation: 'Sales Representative',
employeeID: 17
},
{
taskID: 18,
taskName: 'Bug fix',
startDate: new Date('02/24/2017'),
endDate: new Date('02/25/2017'),
duration: 2,
progress: '0',
priority: 'Critical',
approved: false,
designation: 'Sales Representative',
employeeID: 18
},
{
taskID: 19,
taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'),
duration: 2,
progress: '0',
priority: 'High',
approved: false,
designation: 'Sales Representative',
employeeID: 19
},
{
taskID: 20,
taskName: 'Phase 1 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'),
duration: 0,
progress: '50',
priority: 'Low',
approved: true,
designation: 'Sales Representative',
employeeID: 20
}
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
progress: 60,
designation: 'Sales Representative',
employeeID: 21,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
progress: 90,
designation: 'Sales Representative',
employeeID: 22,
subtasks: [{
taskID: 23,
taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'),
duration: 4,
progress: '50',
priority: 'Normal',
approved: true,
designation: 'Sales Representative',
employeeID: 23
},
{
taskID: 24,
taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/20/2017'),
duration: 4,
progress: '50',
priority: 'Critical',
approved: true,
designation: 'Sales Representative',
employeeID: 24
},
{
taskID: 25,
taskName: 'Testing',
startDate: new Date('02/21/2017'),
endDate: new Date('02/24/2017'),
duration: 2,
progress: '0',
priority: 'High',
approved: false,
designation: 'Sales Representative',
employeeID: 25
},
{
taskID: 26,
taskName: 'Bug fix',
startDate: new Date('02/25/2017'),
endDate: new Date('02/26/2017'),
duration: 2,
progress: '0',
priority: 'Low',
approved: false,
designation: 'Sales Representative',
employeeID: 26
},
{
taskID: 27,
taskName: 'Customer review meeting',
startDate: new Date('02/27/2017'),
endDate: new Date('02/28/2017'),
duration: 2,
progress: '0',
priority: 'Critical',
approved: true,
designation: 'Sales Representative',
employeeID: 27
},
{
taskID: 28,
taskName: 'Phase 2 complete',
startDate: new Date('02/28/2017'),
endDate: new Date('02/28/2017'),
duration: 0,
progress: '50',
priority: 'Normal',
approved: false,
designation: 'Sales Representative',
employeeID: 28
}
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
progress: 30,
designation: 'Sales Representative',
employeeID: 29,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
progress: 60,
designation: 'Sales Representative',
employeeID: 30,
subtasks: [{
taskID: 31,
taskName: 'Development Task 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'),
duration: 3,
progress: '50',
priority: 'Low',
approved: true,
designation: 'Sales Representative',
employeeID: 31
},
{
taskID: 32,
taskName: 'Development Task 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/19/2017'),
duration: 3,
progress: '50',
priority: 'Normal',
approved: false,
designation: 'Sales Representative',
employeeID: 32
},
{
taskID: 33,
taskName: 'Testing',
startDate: new Date('02/20/2017'),
endDate: new Date('02/21/2017'),
duration: 2,
progress: '0',
priority: 'Critical',
approved: true,
designation: 'Sales Representative',
employeeID: 33
},
{
taskID: 34,
taskName: 'Bug fix',
startDate: new Date('02/24/2017'),
endDate: new Date('02/25/2017'),
duration: 2,
progress: '0',
priority: 'High',
approved: false,
designation: 'Sales Representative',
employeeID: 34
},
{
taskID: 35,
taskName: 'Customer review meeting',
startDate: new Date('02/26/2017'),
endDate: new Date('02/27/2017'),
duration: 2,
progress: '0',
priority: 'Normal',
approved: true,
designation: 'Sales Representative',
employeeID: 35
},
{
taskID: 36,
taskName: 'Phase 3 complete',
startDate: new Date('02/27/2017'),
endDate: new Date('02/27/2017'),
duration: 0,
progress: '50',
priority: 'Critical',
approved: false,
designation: 'Sales Representative',
employeeID: 36
},
]
}]
}
]
}
];
return sampleData;
}
}
Index file:
import Test from './pages/test';
window.Test = Test;
And then finally I run this in an html page:
<script type="text/javascript">
let test = new Test();
script>
SIGN IN To post a reply.
1 Reply
PS
Pon Selva Jeganathan
Syncfusion Team
January 17, 2022 06:44 PM UTC
Hi Franco,
Thanks for contacting syncfusion forum.
We are preparing sample based on your shared code snippet, but we are unable to reproduce the issue at our end.
Please refer to the below sample
https://www.syncfusion.com/downloads/support/forum/171899/ze/ej2-js-webpack-main-716653622
After following the above reference, still faced issue please share us the following details.
- Share the product version details
- Share the issue reproducible sample or reproduce the issue in our shared sample.
The provided information will be helpful to provide you response as early as possible.
Regards,
Pon selva
SIGN IN To post a reply.
- 1 Reply
- 2 Participants
-
CE ceds
- Jan 12, 2022 08:37 AM UTC
- Jan 17, 2022 06:44 PM UTC
