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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Using DiagramComponent in AMD module system

Thread ID:





146223 Jul 26,2019 07:54 AM UTC Aug 27,2019 10:35 AM UTC React - EJ 2 7
Tags: Diagram
Asked On July 26, 2019 07:54 AM UTC


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?

Naganathan Ganesh Babu [Syncfusion]
Replied On 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 

Replied On 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'        

Shyam G [Syncfusion]
Replied On 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 

Replied On 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

Shyam G [Syncfusion]
Replied On 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 

Replied On August 22, 2019 11:27 AM UTC

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

Shyam G [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon