We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Error when create the production build using tree grid: Object prototype may only be an Object or null: undefined

Hi,

I've been trying to use the TreeGrid component. While developing and running it when npm run start it works as expected, but when running it from the production version (npm run build) the packed version will throw this error:

header-cell-renderer.js:6 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at e (header-cell-renderer.js:6:16)
    at header-cell-renderer.js:9:9
    at header-cell-renderer.js:27:5
    at Object.<anonymous> (header-cell-renderer.js:26:41)
    at l (attendance-report.htm:1:1195)
    at Object.<anonymous> (print.js:1:1)
    at l (attendance-report.htm:1:1195)
    at Object.<anonymous> (util.js:1:1)
    at l (attendance-report.htm:1:1195)


Upon further inspection, I can see that this happens in the following part of the Syncfusion's library:




These are the versions we are using:

    "@syncfusion/ej2-react-buttons": "^19.4.55",  
    "@syncfusion/ej2-react-calendars": "^19.4.56",  
    "@syncfusion/ej2-react-charts": "^19.4.54",
    "@syncfusion/ej2-react-dropdowns": "^19.4.56",  
    "@syncfusion/ej2-react-heatmap": "^19.4.52",  
    "@syncfusion/ej2-react-inputs": "^19.4.52",
    "@syncfusion/ej2-react-pivotview": "^19.4.55",  
    "@syncfusion/ej2-react-querybuilder": "^19.4.56",
    "@syncfusion/ej2-react-richtexteditor": "^19.4.56",
    "@syncfusion/ej2-react-treegrid": "^19.4.56",


and the react version is as follows:

 "react-scripts": "^4.0.0"
"react": "^17.0.0",
 "react-dom": "^17.0.0",


we are also using material-ui as the style library, with the following versions:

"@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.61",
    "@material-ui/styles": "^4.11.3",


The code is implemented as:

import { ColumnDirective, ColumnMenu, ColumnsDirective, ExcelExport, Filter, Inject,
    PdfExport, Sort, Toolbar, TreeGridComponent, VirtualScroll } from '@syncfusion/ej2-react-treegrid';
import { Grid as MuiGrid} from '@material-ui/core'

...

<MuiGrid container spacing={1}>
                        <MuiGrid item xs={12}>
                            <TreeGridComponent
                                ref={g => (this.grid = g)}
                                dataSource={AGGR_DATA}
                                treeColumnIndex={1}
                                childMapping={true}
                                allowFiltering={true}
                                filterSettings={{type: 'Menu', hierarchyMode: 'Parent'}}
                                allowSorting={true}
                                enableVirtualization={true}
                                enableCollapseAll={true}
                                allowPdfExport={true}
                                allowExcelExport={true}
                                showColumnChooser={true}
                                showColumnMenu={true}
                                toolbar={['PdfExport', 'ExcelExport']}
                                toolbarClick={this.toolbarClick}
                                expanded={this.rowExpanded}
                                collapsed={this.rowCollapsed}
                                rowSelected={this.rowSelected}
                                rowDeselected={this.rowSelected}
                                selectionSettings={{type: 'Multiple'}}
                                height={400}
                                allowTextWrap={true}
                                allowResizeToFit={true}
                            >
                                <ColumnsDirective>
                                    {this.state.columns &&
                                        this.state.columns.map(col => {
                                            return (
                                                <ColumnDirective
                                                    key={col.id}
                                                    field={col.id}
                                                    headerText={col.label}
                                                    visible={col.visible}
                                                    type={col.type}
                                                    isPrimaryKey={col.isPrimaryKey}
                                                />
                                            )
                                        })}
                                </ColumnsDirective>
                                <Inject
                                    services={[
                                        Filter,
                                        Sort,
                                        VirtualScroll,
                                        Toolbar,
                                        PdfExport,
                                        ExcelExport,
                                        ColumnMenu,
                                    ]}
                                />
                            </TreeGridComponent>
                        </MuiGrid>
                    </MuiGrid>


Do you know, or heard about any compatibility issues with TreeGrid?


Thank you very much for your help.


1 Reply

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 16, 2022 09:19 AM


Hi Gonzalo,


Greetings from Syncfusion Support.


The reported problem is already known Issue in the mentioned version. To overcome this problem, we suggest you to upgrade into our latest version 20.3.57 or minimal of 20.1.48 to resolve the problem. Please get back to us if you need any further assistance.


Regards,

Farveen sulthana T


Loader.
Live Chat Icon For mobile
Up arrow icon