Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Mindfusion types in React (Read 255 times)
Kamil
YaBB Newbies
*
Offline



Posts: 22
Joined: Aug 22nd, 2024
Mindfusion types in React
Oct 4th, 2024 at 12:22pm
Print Post  
Hi there! I'm using mindfusion in React. Here is the way that I import the library:

Code (Javascript)
Select All
import * as mfDiagramming from '@mindfusion/diagramming';
 



Then I use it like that to create a diagram:
Code (Javascript)
Select All
    const diagram = new mfDiagramming.Diagram();
}
 



The problem is, that when I'm hovering on "Diagram()" in my IDE, the types are not resolved properly. It displays: "any". Please see my first attachment.

The second attachment shows the information that I get when I hover over mf import.

Could you advise me on how to achieve proper types for mfDiagramming object?




  

attachment1.png ( 21 KB | 21 Downloads )
attachment1.png
attachment2.png ( 102 KB | 27 Downloads )
attachment2.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3343
Joined: Oct 19th, 2005
Re: Mindfusion types in React
Reply #1 - Oct 7th, 2024 at 7:32am
Print Post  
Hi,

Apparently nodejs changed how typings should be defined (https://www.kravchyk.com/typescript-npm-package-json-exports/). For time being try editing @mindfusion/diagramming/package.json in your npm package cache, replacing the export section with this:

Code
Select All
"exports": {
    ".": {
      "import": {
        "types": "./diagramming.d.ts",
        "default": "./dist/esm/diagramming.js"
      },
      "require": {
        "types": "./diagramming.d.ts",
        "default": "./dist/cjs/diagramming.js"
      }
    }
  }, 



We'll publish a small update with that soon.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Kamil
YaBB Newbies
*
Offline



Posts: 22
Joined: Aug 22nd, 2024
Re: Mindfusion types in React
Reply #2 - Oct 7th, 2024 at 9:32am
Print Post  
Thank you! I can see the types now Smiley
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint