Dhx is undefined when using DHTMLX Diagram in React Component

Diagram
#1

Hello,

I’m fairly new in using DHTMLX and right now I’m having trouble instantiating my diagram.
I imported the file for dhtmlx diagram as follows:

import '../../../codebase/diagram.js';
import '../../../codebase/diagram.css';

and have my initialization code in componentDidMount() like this

    componentDidMount() {
      var diagram = new dhx.Diagram(this.container);
      diagram.data.parse(this.state.simple_dataset);
    }

But right now it won’t compile and says

‘dhx’ is not defined

i used gantt and schdeuler in the same manner and there is no problem

#2

please, try to use:

import { dhx}   from '../../../codebase/diagram.js'

If the problem still occurs for you please, provide a more detailed snippet of your code

#3

Hello @sematik, still does not work for me. Below is my code when building the diagram

var data = [
      { "id": "0", "text": "Technical"},
      { "id": "1", "text": "Development", "parent": "0" },
      { "id": "2", "text": "Research", "parent": "0" },
  ]

  var diagram = new dhx.Diagram('concept-container',
    {
      type: "org",
      scale: 0.8,
      select: true,
      margin:{
        x:20,
        y:20,
        itemX:50,
        itemY:50
      }
    }
  );

  this.setupDiagramEvents(diagram);
  diagram.data.parse(data);

So far this is the only code that i call in my render() and gives me this error

55%20PM

#4

your diagram.js is not imported successfully on the page.
If the problem still occurs for you please, provide a complete demo, where the problem can be reconstructed locally.

#5

27
27709×204 34.7 KB

I got this error when importing the library as ES6 module in an react component, is this a known issue?

import { dhx } from '../../lib/DhtmlxDiagram/diagram'
#6

Unfortunately it is not availble to include the sources of the diagram on the page using the import.
THe only solution is to place the js,css sources on your index.html page like common js scripts and css stylesheets.

#7

inlcude the scripts for diagram in index.html
and then in your component use
diagram = new window.dhx.Diagram(“diagram”, {
type: “org”,
defaultShapeType: “template”,
margin: {
itemX: 50,
itemY: 50,
},
//scale: 0.6,
});
use window. before dhx.diagram

1 Like