Bug "Hot Reload" after add "checkBoxChange" event

[Geoffrey]

Hello team,

I am on a poc to validate the use of your components and I encounter a problem.

I'm using a "GridComponent" type component which works normally as long as it does something simple.

I need the "checkBoxChange" event, that works fine.

But when I save my file on visual studio code and the "hot reload" is done in the browser.

I have an error that blocks the page:

full log attached as well as part of my code.

Thank you.

Geoffrey

Attachment: GridTest_8feaaa0a.zip

[Geoffrey]

In the rest of my tests I wanted to add a template on an "emailConfirmed" column, and I think the two problems I have are related.

I attach my new test tsx file (simplified).

The crash happens when I click on the selection checkmark at the beginning of the line.

Am I forgetting something?

I'm on the latest version, updated yesterday.

Attachment: GridTest_4fcc4da7.zip

[Geoffrey]

After new tests this morning, finally even with a simple Grid, the "hot reload" makes the site explode...

I'm pretty sure of myself saying it's due to the update I made.

I made this update because when adding the template on a column I had the error: "str.match is not a function"

This is the only solution I found on your forums.

[Sujith Kumar Rajkumar]

Hi Geoffrey, 

 

Greetings from Syncfusion support. 

 

We were unable to reproduce the reported problem from our end as no console errors were thrown on using the checkBoxChange event in Grid having column template. Please check the below sample for reference, 

 

Sample: https://stackblitz.com/edit/react-7s8ucm?file=index.js 

 

Since you have mentioned that you have updated the packages to the latest version recently, we suspect that you might be facing problem due to 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, 

 

• Share us a video demonstration of the problem.
• 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. This would be helpful to identify your exact problem case and validate further based on that.

 

Regards, 

Sujith R 

[Geoffrey]

hi,

I have already performed these operations for the update:

• 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.

I just redid them but the problem is still there.

I just tested with Edge and I have the same problem.

The only difference I see with the example you provide:

- I am with TypeScript and not JS

- I am in export default observer(function xx() {return()}) and not in export class CheckboxSelection{ render(){ return ()}}

Does this change anything?

I attach the package.json

Moreover as said above, even without the implementation of the "checkBoxChange" I have the problem.

The Grid is no longer usable after the "Hot reload" and this error is displayed

Attachment: package_27999293.zip

[Rajapandi Ravi]

Hi Geoffrey, 

Currently we are validating the problem with given details and based on your shared information we are preparing a sample and we will update you the details on 25^th Jan 2022. Until then we appreciate your patience. 

Regards, 

Rajapandi R 

[Geoffrey]

Hello,

I have something new.

This weekend, I started updating all my modules, so I am attaching my new package.json.

This error seems to have disappeared:

I keep getting this error when I click on a one line checkbox (It's the same error after a "hot reload")

:

  in component-base.js (line 365):

FYI, I'm using React-router for the skeleton.

Thx

Geoffrey

Attachment: package_f3dfd36f.zip

[Sujith Kumar Rajkumar]

Hi Geoffrey, 

 

Your reported console error occurs if there are duplicate packages installed in the @syncfusion folder of the node modules and since you have mentioned that you updated the packages we suspect that this might be causing the problem. So we suggest you to follow the steps provided in our previous update once more and check if the problem is resolved. And if problem still persists it would be helpful if you could share us the following information to validate further, 

 

• Please confirm us if you have performed any update/property changes on the Grid on initial render in events or any of the lifecycle hooks of angular.
• Please confirm us if the Grid is directly rendered on the page or inside any other custom components like, popup, tab.
• If possible share us a replication sample to identify your exact problem case.

 

Regards, 

Sujith R 

[Geoffrey]

Hello,

here is the answer that was given to me in Ticket 363330:

The reported issue occurs while Grid has columns with no specific field properties. Currently, we have forwarded this to the corresponding team. So, we will update the details on January 26th, 2022. Until then we appreciate your patience.

If it ever helps anyone else.



[Rajapandi Ravi]

Hi Geoffrey, 

We are glad that the provided solution resolves your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R