Trouble upgrading (plus TypeScript)

[Eric Forgy]

Hi,

Back in October, I had a similar problem to the one I face now with setting the width and height of a chart in a panel in a dashboard. I want the chart to fill up the container 100% (or maybe something slightly less). 

The old issue is here:

• Height prop is being ignored?

After some back and forth, Srihari Muthukaruppan, shared a very helpful Stackblitz

https://stackblitz.com/edit/react-cshxmp-qqdd2u

That worked. I've been away for a while and I've upgraded Syncfusion and having trouble getting the same to work again.

I've created a new Stackblitz here:

https://stackblitz.com/edit/react-ts-zxht6o

This should be identical code to the one shared by Srihari except for two differences:

1. I upgraded all the Synfusion libraries from 18.3 to 18.4
2. I am using TypeScript

I was using TypeScript before with no issue, but now I am seeing some weird stuff that I think might be related to TypeScript.

I am having trouble reproducing my actual issue on Stackblitz, but if I can sort out the current issue on Stackblitz, maybe I will be able to further isolate my main issue.

Could someone help me understand why that new Stackblitz isn't working when it is identical code to the first (original) Stackblitz? 

In the new Stackblitz, if you scroll down, you can see the second set of charts, but the top set of simple divs can't be seen. Even though you can see the test charts below, they are not stacked properly in the dashboard so there appear to be multiple issues.

I attached a screenshot of my main issue, but we can address that after we get the Stackblitz sorted (unless you see an easy fix).

Thank you for your help.

Attachment: Clipboard11_b5276a37.zip

[Eric Forgy]

By the way, if I take the old Stackblitz and do nothing, but upgrade the dependencies v18.3 -> v18.4, it seems to work. Here is a Stackblitz with no change except updated dependencies:

https://stackblitz.com/edit/react-cshxmp-nnkxcz

It seems the problem appears only when using TypeScript for some reason.

[Eric Forgy]

I've reverted my code back from v18.4 to v18.3 and everything, including TypeScript, is working fine.

There is definitely something broken when upgrading from v18.3 to v18.4 relating to TypeScript. I'm in a rush now, but I definitely need to get to the bottom of this and I'll try to dig in again later.

It must be an issue relating to the PanelDirective content prop in TypeScript. If I use a string for content, it is fine, but I use an function component, the template matching is broken (see image uploaded in my post first above).

[Sharon Sanchez Selvaraj]

Hi Eric, 

 

We have created a sample using TSX in the updated version. By using a function template, the content is changed.  

 

Please find the sample link below. 

 

https://stackblitz.com/edit/react-ts-fvpfmq?file=index.tsx 

 

Please check with the above sample and make the necessary code changes of your preference. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[Keerthana Rajendran]

Hi Eric, 

We have created the above sample using TSX in the updated version 18.4 by using a function template for panel directive within DashboardLayout. The content is updated initially as well as on dynamic update too. Please check with the above sample and if issue persists, modify the sample to replicate the issue along with clear details on your requirement to assist you promptly. 

Regards, 

Keerthana. 

[Eric Forgy]

Thank you. I've had to move on to something else for now, but will try to return to this and get it sorted.

Just a couple quick comments.

I don't use classes anymore. I use function components for everything. Have you tried function components so you can also use hooks, etc?

Also, as far as I can tell, react-scripts-ts is not the recommended way to use TypeScript in React. Have you tried a local example (not StackBlitz) following the suggestion here:

https://create-react-app.dev/docs/adding-typescript/

? To really compare, I would need to see your tsconfig.json at least.

I have code that was running fine on v18.3, but gives the error included in my first comment on v18.4 and the only change is the upgrade of v18.3 -> v18.4.

But, as mentioned, my code uses function components and the recommended way to use TypeScript with CRA.

[Sharon Sanchez Selvaraj]

Hi Eric, 

We have validated your reported issues in both Stackblitz and in the local sample. 

With regards to the stackblitz issue, kindly mention the style link which is required for Dashboard. We have modified your sample. Please check with the below link. 

https://stackblitz.com/edit/react-ts-9pqebs?file=index.html 

With respect to your issue “using function components”,  we faced the similar issue in the local sample as attached in the screenshot. We suggest you to delete the package.lock.json and the “@syncfusion” package present in the node_modules folder before upgrading to latest version. We have attached the sample here for your reference. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dashboard-1803691112.zip 

Please get back to us if you need any further assistance. 

Regards, 

Sharon Sanchez S.