Implement dpmnjs on react with edit functionality

Developers Modeler
1

hi all im trying to create an implementation of bpmn-js in a react aplication . On this i want to have an editor of diagrams in which the front end will recieve data from the back end so the user can edit and repost them .
My problem is on edit functionality of the Modeler . I have tried the example given on the walkthrough

modeler.on('element.changed', (event) => {
  const element = event.element;

  // the element was changed by the user
});

but I am getting an error of “di not defined”

im posting the code of the component bellow


  useEffect(() => {
    if (diagram.length === 0) {
      axios
        .get(
          // "https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/master/colors/resources/pizza-collaboration.bpmn"
          `http://localhost:${process.env.REACT_APP_SERVER_PORT}/XML/xmls`
        )
        .then((r) => {
          diagramSet(r.data.data[0].xml);
        })
        .catch((e) => {
          console.log(e);
        });
    }
  }, [diagram]);

  if (diagram.length > 0) {
    const modeler = new Modeler({
      container,
      keyboard: {
        bindTo: document
      }
    });
    modeler
      .importXML(diagram)
      .then(({ warnings }) => {
        if (warnings.length) {
          console.log("Warnings", warnings);
        }

        const canvas = modeler.get("modeling");
        canvas.setColor("CalmCustomerTask", {
          stroke: "green",
          fill: "yellow"
        });
      })
      // .on('element.changed', (event) => {
      //   const element = event.element;
      //   diagramSet(element)

      //   console.log("elemenet changed :  ", element)
      // })
      .catch((err) => {
        console.log("error", err);
      });
  }

basically i want to get the diagram const to post it back after the user implement changes on it HELP :slight_smile:

Thank you in advance