Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'getElementsByClassName')

[Nguyen Khoa Lu]

Hi Syncfusion, I have problem when using GridComponent inside a popup.

After I insert 1 row and delete that row. When I hide popup, GridComponent throw for me this error. I think you should use try catch in this case or something else to fixed.

Please check it.

Thanks

util.js:1510 Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')

at getCellsByTableName (util.js:1510)

at getCellByColAndRowIndex (util.js:1526)

at GridComponent.Grid.getCellFromIndex (grid.js:2096)

at GridComponent. (grid.js:2046)

at callCallback (react-dom.development.js:12318)

at commitUpdateQueue (react-dom.development.js:12339)

at commitLifeCycles (react-dom.development.js:20709)

at commitLayoutEffects (react-dom.development.js:23426)

at HTMLUnknownElement.callCallback (react-dom.development.js:3945)

at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)

at invokeGuardedCallback (react-dom.development.js:4056)

at commitRootImpl (react-dom.development.js:23151)

at unstable_runWithPriority (scheduler.development.js:468)

at runWithPriority$1 (react-dom.development.js:11276)

at commitRoot (react-dom.development.js:22990)

at performSyncWorkOnRoot (react-dom.development.js:22329)

at react-dom.development.js:11327

at unstable_runWithPriority (scheduler.development.js:468)

at runWithPriority$1 (react-dom.development.js:11276)

at flushSyncCallbackQueueImpl (react-dom.development.js:11322)

at flushSyncCallbackQueue (react-dom.development.js:11309)

at scheduleUpdateOnFiber (react-dom.development.js:21893)

at dispatchAction (react-dom.development.js:16139)

at invokeCommandUpdate (index.js:282)

getCellsByTableName @ util.js:1510

getCellByColAndRowIndex @ util.js:1526

Grid.getCellFromIndex @ grid.js:2096

(anonymous) @ grid.js:2046

callCallback @ react-dom.development.js:12318

commitUpdateQueue @ react-dom.development.js:12339

commitLifeCycles @ react-dom.development.js:20709

commitLayoutEffects @ react-dom.development.js:23426

callCallback @ react-dom.development.js:3945

invokeGuardedCallbackDev @ react-dom.development.js:3994

invokeGuardedCallback @ react-dom.development.js:4056

commitRootImpl @ react-dom.development.js:23151

unstable_runWithPriority @ scheduler.development.js:468

runWithPriority$1 @ react-dom.development.js:11276

commitRoot @ react-dom.development.js:22990

performSyncWorkOnRoot @ react-dom.development.js:22329

(anonymous) @ react-dom.development.js:11327

unstable_runWithPriority @ scheduler.development.js:468

runWithPriority$1 @ react-dom.development.js:11276

flushSyncCallbackQueueImpl @ react-dom.development.js:11322

flushSyncCallbackQueue @ react-dom.development.js:11309

scheduleUpdateOnFiber @ react-dom.development.js:21893

dispatchAction @ react-dom.development.js:16139

invokeCommandUpdate @ index.js:282

async function (async)

invokeCommandUpdate @ index.js:280

onDirToolbarClicked @ index.js:606

handleToolbarClicked @ index.js:12

handleOnClicked @ index.js:17

onClick @ index.js:32

callCallback @ react-dom.development.js:3945

invokeGuardedCallbackDev @ react-dom.development.js:3994

invokeGuardedCallback @ react-dom.development.js:4056

invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070

executeDispatch @ react-dom.development.js:8243

processDispatchQueueItemsInOrder @ react-dom.development.js:8275

processDispatchQueue @ react-dom.development.js:8288

dispatchEventsForPlugins @ react-dom.development.js:8299

(anonymous) @ react-dom.development.js:8508

batchedEventUpdates$1 @ react-dom.development.js:22396

batchedEventUpdates @ react-dom.development.js:3745

dispatchEventForPluginEventSystem @ react-dom.development.js:8507

attemptToDispatchEvent @ react-dom.development.js:6005

dispatchEvent @ react-dom.development.js:5924

unstable_runWithPriority @ scheduler.development.js:468

runWithPriority$1 @ react-dom.development.js:11276

discreteUpdates$1 @ react-dom.development.js:22413

discreteUpdates @ react-dom.development.js:3756

dispatchDiscreteEvent @ react-dom.development.js:5889

index.js:1 The above error occurred in the component:

at GridComponent (http://localhost:3000/static/js/vendors~main.chunk.js:307723:24)

at div

at Container (http://localhost:3000/static/js/vendors~main.chunk.js:8162:23)

at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:53958:31)

at div

at Container (http://localhost:3000/static/js/vendors~main.chunk.js:8162:23)

at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:53958:31)

at http://localhost:3000/static/js/main.chunk.js:977:5

at div

at Container (http://localhost:3000/static/js/vendors~main.chunk.js:8162:23)

at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:53958:31)

at http://localhost:3000/main.f65bf7ca50562f531a63.hot-update.js:49:5

at http://localhost:3000/static/js/main.chunk.js:2360:5

at div

at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:12787:35)

at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:53958:31)

at div

at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:12787:35)

at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:53958:31)

at _c (http://localhost:3000/static/js/main.chunk.js:9194:5)

at div

at div

at div

at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:418839:30)

at Collapse (http://localhost:3000/static/js/vendors~main.chunk.js:7776:24)

at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:53958:31)

at ul

at List (http://localhost:3000/static/js/vendors~main.chunk.js:17512:24)

at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:53958:31)

at TabView (http://localhost:3000/static/js/main.chunk.js:8801:79)

at div

at CardContent (http://localhost:3000/static/js/vendors~main.chunk.js:5968:23)

at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:53958:31)

at div

at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:21518:23)

at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:53958:31)

at Card (http://localhost:3000/static/js/vendors~main.chunk.js:5647:23)

at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:53958:31)

at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:418839:30)

at Fade (http://localhost:3000/static/js/vendors~main.chunk.js:10865:24)

at Unstable_TrapFocus (http://localhost:3000/static/js/vendors~main.chunk.js:33817:24)

at div

at Portal (http://localhost:3000/static/js/vendors~main.chunk.js:22614:24)

at Modal (http://localhost:3000/static/js/vendors~main.chunk.js:19756:83)

at DirModal (http://localhost:3000/static/js/main.chunk.js:1469:5)

at Report (http://localhost:3000/static/js/main.chunk.js:17648:75)

at main

at div

at AppBar (http://localhost:3000/static/js/main.chunk.js:10014:5)

at Route (http://localhost:3000/static/js/vendors~main.chunk.js:416890:29)

at Wrapper (http://localhost:3000/static/js/main.chunk.js:10603:5)

at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:417092:29)

at Router (http://localhost:3000/static/js/vendors~main.chunk.js:416525:30)

at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:416145:35)

at RouterWrapper

at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:52660:24)

at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:413494:20)

Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

console. @ index.js:1

overrideMethod @ react_devtools_backend.js:2528

logCapturedError @ react-dom.development.js:20085

update.callback @ react-dom.development.js:20118

callCallback @ react-dom.development.js:12318

commitUpdateQueue @ react-dom.development.js:12339

commitLifeCycles @ react-dom.development.js:20736

commitLayoutEffects @ react-dom.development.js:23426

callCallback @ react-dom.development.js:3945

invokeGuardedCallbackDev @ react-dom.development.js:3994

invokeGuardedCallback @ react-dom.development.js:4056

commitRootImpl @ react-dom.development.js:23151

unstable_runWithPriority @ scheduler.development.js:468

runWithPriority$1 @ react-dom.development.js:11276

commitRoot @ react-dom.development.js:22990

performSyncWorkOnRoot @ react-dom.development.js:22329

(anonymous) @ react-dom.development.js:11327

unstable_runWithPriority @ scheduler.development.js:468

runWithPriority$1 @ react-dom.development.js:11276

flushSyncCallbackQueueImpl @ react-dom.development.js:11322

flushSyncCallbackQueue @ react-dom.development.js:11309

scheduleUpdateOnFiber @ react-dom.development.js:21893

dispatchAction @ react-dom.development.js:16139

invokeCommandUpdate @ index.js:282

async function (async)

invokeCommandUpdate @ index.js:280

onDirToolbarClicked @ index.js:606

handleToolbarClicked @ index.js:12

handleOnClicked @ index.js:17

onClick @ index.js:32

callCallback @ react-dom.development.js:3945

invokeGuardedCallbackDev @ react-dom.development.js:3994

invokeGuardedCallback @ react-dom.development.js:4056

invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070

executeDispatch @ react-dom.development.js:8243

processDispatchQueueItemsInOrder @ react-dom.development.js:8275

processDispatchQueue @ react-dom.development.js:8288

dispatchEventsForPlugins @ react-dom.development.js:8299

(anonymous) @ react-dom.development.js:8508

batchedEventUpdates$1 @ react-dom.development.js:22396

batchedEventUpdates @ react-dom.development.js:3745

dispatchEventForPluginEventSystem @ react-dom.development.js:8507

attemptToDispatchEvent @ react-dom.development.js:6005

dispatchEvent @ react-dom.development.js:5924

unstable_runWithPriority @ scheduler.development.js:468

runWithPriority$1 @ react-dom.development.js:11276

discreteUpdates$1 @ react-dom.development.js:22413

discreteUpdates @ react-dom.development.js:3756

dispatchDiscreteEvent @ react-dom.development.js:5889

util.js:1510 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')

at getCellsByTableName (util.js:1510)

at getCellByColAndRowIndex (util.js:1526)

at GridComponent.Grid.getCellFromIndex (grid.js:2096)

at GridComponent. (grid.js:2046)

at callCallback (react-dom.development.js:12318)

at commitUpdateQueue (react-dom.development.js:12339)

at commitLifeCycles (react-dom.development.js:20709)

at commitLayoutEffects (react-dom.development.js:23426)

at HTMLUnknownElement.callCallback (react-dom.development.js:3945)

at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)

at invokeGuardedCallback (react-dom.development.js:4056)

at commitRootImpl (react-dom.development.js:23151)

at unstable_runWithPriority (scheduler.development.js:468)

at runWithPriority$1 (react-dom.development.js:11276)

at commitRoot (react-dom.development.js:22990)

at performSyncWorkOnRoot (react-dom.development.js:22329)

at react-dom.development.js:11327

at unstable_runWithPriority (scheduler.development.js:468)

at runWithPriority$1 (react-dom.development.js:11276)

at flushSyncCallbackQueueImpl (react-dom.development.js:11322)

at flushSyncCallbackQueue (react-dom.development.js:11309)

at scheduleUpdateOnFiber (react-dom.development.js:21893)

at dispatchAction (react-dom.development.js:16139)

at invokeCommandUpdate (index.js:282)

[Sujith Kumar Rajkumar]

Hi Nguyen, 

Greetings from Syncfusion support. 

We checked the reported problem but unfortunately were unable to reproduce it from our end as the mentioned case was working properly when Grid is rendered in EJ2 Dialog. Please check the below sample for reference, 

Sample: https://stackblitz.com/edit/react-1sh1wd?file=index.js 

We suspect that you might be facing problem due to older Syncfusion packages or duplicate packages installed inside your application’s ‘@syncfusion’ package in the node modules folder. This might be invoking different package version files causing the reported problem. So please follow the steps provided below to overcome this and install the latest packages, 

• Delete package.lock.json file from your application.  
• Remove the @syncfusion package folder from the node_modules.
• Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
• Then install the NPM packages.

Once installed, clear the browser cache and try running the application and check if the problem is resolved. Also try opening it in other browsers. 

If problem still persists then please share us the following information to validate further on this, 

• Let us know if you have used EJ2 Dialog or any other popup to render the Grid.
• Have you bound local or remote data to the Grid? If remote data, which adaptor have you used.
• Share us the entire Grid and popup related code file.
• Share us the package.json file of your application.
• If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample.

Regards, 

Sujith R 

[Nguyen Khoa Lu]

It is still not working :(((

util.js:1513 Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByClassName')

    at getCellsByTableName (util.js:1513)

    at getCellByColAndRowIndex (util.js:1529)

    at GridComponent.Grid.getCellFromIndex (grid.js:2120)

    at GridComponent.<anonymous> (grid.js:2050)

    at callCallback (react-dom.development.js:12318)

    at commitUpdateQueue (react-dom.development.js:12339)

    at commitLifeCycles (react-dom.development.js:20709)

    at commitLayoutEffects (react-dom.development.js:23426)

    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)

    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)

    at invokeGuardedCallback (react-dom.development.js:4056)

    at commitRootImpl (react-dom.development.js:23151)

    at unstable_runWithPriority (scheduler.development.js:468)

    at runWithPriority$1 (react-dom.development.js:11276)

    at commitRoot (react-dom.development.js:22990)

    at performSyncWorkOnRoot (react-dom.development.js:22329)

    at react-dom.development.js:11327

    at unstable_runWithPriority (scheduler.development.js:468)

    at runWithPriority$1 (react-dom.development.js:11276)

    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)

    at flushSyncCallbackQueue (react-dom.development.js:11309)

    at discreteUpdates$1 (react-dom.development.js:22420)

    at discreteUpdates (react-dom.development.js:3756)

    at dispatchDiscreteEvent (react-dom.development.js:5889)

I can't create a simple demo, It not working only my project.

My project show error at here:

at setDirAction method, im try catch here but it still not working.

[Sujith Kumar Rajkumar]

Hi Nguyen, 

 

We are still not able to reproduce the reported problem from our end as we cannot identify your exact problem case. So please share us the following information requested in our previous update to validate further based on that, 

 

• Let us know if you have used EJ2 Dialog or any other popup to render the Grid.
• Have you bound local or remote data to the Grid? If remote data, which adaptor have you used.
• Share us the entire Grid and popup related code file.
• Share us the package.json file of your application.

 

Regards, 

Sujith R