Dhx is undefined when using DHTMLX Diagram in React Component


#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.