Cannot read property isGeneric of undefined

Developers
1

I am running modeler in a React app, and my end goal is to console.log an updated XML config – after I have deleted icons from model.

My app first creates a new modeler instance:

  componentDidMount = () => {
    this.modeler = new BpmnModeler({
      container: "#bpmnview",
      keyboard: {
        bindTo: window
      }
    });

    this.getDiagram();
  };

to then open the diagram (XML string fetched from API) like so:

  openBpmnDiagram = xml => {
    this.modeler.importXML(xml, error => {
      if (error) {
        return console.log("fail import xml");
      }
      const canvas = this.modeler.get("canvas");
      canvas.zoom("fit-viewport");
    });
  };

Everything is rendering fine, but when I call the following function:

  getUpdatedXML = () => {
    return new Promise((accept, reject) => {
      this.modeler._moddle.toXML(
        this.modeler.get("canvas"),
        {
          format: true
        },
        (err, response) => {
          if (err) return reject(err);
          return accept(response);
        }
      );
    });
  };

then it returns the error: error getting updated XML TypeError: Cannot read property 'isGeneric' of undefined

2

Two things: You can’t input canvas into moddle#toXML, it requires an element, e.g. definitions

 this.modeler._moddle.toXML(definitions, options)

you can get the definitions directly from the Modeler

const definitions = this.modeler.getDefinitions()

Second: I wouldn’t use moddle directly, saveXML offers an API for that.

3

thanks, ended up doing:

    this.modeler.saveXML({ format: true }, function(err, xml) {
      if (err) {
        return console.error("could not save BPMN 2.0 diagram", err);
      }
      console.log(xml);
    });
1 Like