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

Using DiagramComponent in AMD module system


We have system using React+TypeScript base on AMD system module. We would like to add your library ej2-react-diagrams to our application.


Question is it possible without migrating to SystemJS? Maybe some examples or suggestions?

7 Replies

NG Naganathan Ganesh Babu Syncfusion Team July 30, 2019 01:13 PM UTC

Hi Klaudiusz, 
Thanks for contacting Syncfusion support. 
We suggest you to use below link to  Create React App project with TypeScript application. 
While creating application, you can use “npx create-react-app my-app –typescript” query instead of “npm install -g create-react-app” to create react application in your end usual by using below our UG documentation link. 
Naganathan K G 

EN enova August 8, 2019 06:58 AM UTC



I will try to to give you a little more details :)

I have d.ts file where I store all my external definitions of types example:


/// <reference path="react/react-global.d.ts" />

/// <reference path="requirejs/require.d.ts" />

/// <reference path="classnames/classnames.d.ts" />

/// <reference path="underscore/underscore.d.ts" />



In this file I would like to add: 

/// <reference path="../../node_modules/@syncfusion/ej2-react-diagrams/index.d.ts" />


How ever build will fail with errors like this: 

Error               Build:Cannot find module './diagram'

Error               Build:Cannot find module './symbol-palette'

Error               Build:Cannot find module './overview'

Error               Build:Cannot find module '@syncfusion/ej2-react-base'

Error               Build:Cannot find module '@syncfusion/ej2-diagrams'        

SG Shyam G Syncfusion Team August 10, 2019 12:32 PM UTC

Hi Enova, 
We have referred diagram node_modules in triple slash directives and an application works fine at our end. Could you please check in below sample? Still, if you face issues, please share us more details such as modify the below sample or share your sample. 
Shyam G 

EN enova August 21, 2019 12:40 PM UTC

Here you have a example of how our system works and how we attach external files in our project. Hope you will have some advice how to solve this problem.

Attachment: TestDiagram_fc244fd7.zip

SG Shyam G Syncfusion Team August 22, 2019 10:38 AM UTC

Hi Enova, 

We found that ej2-react-diagrams package folder missing within node_modules folder when evaluating your sample. So only in the implementation, the file that was not found mistake happens. To install the package ej2-react-diagrams, use the command below. 

npm install @syncfusion/ej2-react-diagrams –save 

Shyam G 

EN enova August 22, 2019 11:27 AM UTC

Folder is existing in node_modules: "node_modules\@syncfusion\ej2-react-diagrams"

SG Shyam G Syncfusion Team August 27, 2019 10:35 AM UTC

Hi Enova, 
Sorry for the delay. 
On further analysis, the Syncfusion component could not be rendered by using typing file(reference path). We should render react Syncfusion component with the tags and it should be imported from Syncfusion package. Please refer to code example below. 

Code example: 
//import DiagramComponent 
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; 
//render diagram  
<DiagramComponent id="diagram" width={"100%"} height={"700px"}/> 

Shyam G 

Live Chat Icon For mobile
Up arrow icon