Mxgraph Reactjs not import mxgraph library

Question

I try to use mxgraph with react project. But I can not use mxgraph with react.

I install mxgraph:

npm install mxgraph

Then I wrote:

import {
   mxGraph,
   mxGraphHandler,
   mxGraphModel,
       ...
} from "mxgraph";

---

InitGraph =()={
   let container = document.createElement("div");
   this.setContainerStyle();

   let model = new mxGraphModel();
   let graph = new mxGraph(container,model);
}

I got an error --> Uncaught TypeError: mxGraphModel is not a constructor.

But when I use to mxgraph-js it is correctly working.

How I use mxgraph ?

Answer 1

I added this piece of code while initializing. This solved the issue

window['mxGraph'] = mxGraph;
window['mxGraphModel'] = mxGraphModel;
const graphEditor = new mxEditor();
window.graphEditor = graphEditor;
graphEditor.createGraph();
let graph = graphEditor.graph

Answer 2

mxgraph to import error to use mxgraph-js ref https://github.com/cloudfroster/mxgraph-js#readme

install pakage

npm install mxgraph-js --save

import package

import {
   mxGraph,
   mxGraphHandler,
   mxGraphModel,
       ...
} from "mxgraph-js";

Answer 3

Try this:

npm i --save mxgraph

import MxGraph from "mxgraph/javascript/dist/build.js";

const {
   mxGraph,
   mxGraphHandler,
   mxGraphModel,
       ...
} = new MxGraph();

Tested this with mxgraph@4.2.2