flowElements is undefined :(

He guys, newbie to bpmn-js here, Iam having difficulties editing a diagram with the setup code below.

<link href="~/bpmn-js/dist/assets/diagram-js.css" rel="stylesheet" />
<link href="~/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css" rel="stylesheet" />
...
async attach(container: HTMLElement) {
    var viewer = new BpmnModeler({ container });
    var xml = await fetch('https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn').then(e => e.text());
    viewer.importXML(xml, err => err && console.error(err));
    return {
        dispose() {
            // dispose viewer
        }
    }
}

When I try to drop an element dragged from toolbox or the canvas itself, then I get these errors, caused by the fact that somehow 'flowElements' is missing in the 'target' object.

unhandled error in event listener
TypeError: Cannot read property 'push' of undefined
    at BpmnUpdater.updateSemanticParent (Modeler.js:14617)
    at ....

Annotation%202019-12-07%20002331

Can you verify that the import is working? Also, importXML is asynchronous. Therefore, it expects a callback as the second parameter. Once this callback is called you know that the import has finished:

async attach(container) {
  const viewer = new BpmnModeler({ container });
  
  const xml = await fetchDiagram();

  return new Promise((resolve, reject) => {
    viewer.importXML(xml, err => {
      if (err) {
        reject(err);
      }

      resolve({
        dispose() {}
      });
    });
  });
}

sure, the import is working and I see the initial view of the diagram, but issues only arise when I start dragging any task, I actually have a demo right here.
https://www.xania.nl/page/process

Did you change the modeler in any way?

No, i didn’t.
The bpmn-js package is not part of my source, For the build I always do a clean install currently version 6.0.4. All I do next is shown in the code above.
The weird thing is that it works when I drag and drop the task ‘Scan QR code’ in the example I published at [https://www.xania.nl/page/process], but breaks when I try to drag any of the other tasks then the ‘Scan QR code’ task also breaks. My point is that all the functionality seems to be there to be able to do that for other tasks but still, it breaks.
For me it’s hard to debug this because when it breaks at the point as shown in the screenshot, it’s hard to track back who is responsible of providing the value that’s missing or maybe the wrong ‘target’ parameter is provided. In theory this could be some also an issue of some mapping of targets and ‘flowElements’. At this point I can only guess unless I know every single bit of the design.

Looking into the issue, this seems to be a problem with the system-js setup you’re using:

  • We do a instanceof B checks in a number of crucial places
  • It seems like there exists different versions of B (diagram-js/lib/model/index.js -> Base) in the bundle
  • shape instanceof Base does not work for that reason and re-instantiation is attempted a second time
  • Editor blows up because of that :boom: :rocket:

I don’t have a working system-js setup locally, nor do we support system-js out of the box. But maybe these pointers help you to debug the issue.

You could verify if using our pre-built distribution helps to work around that issue. Served, i.e. from unpkg.com.


Stack trace for reference:

Modeling._create (Modeling.js:2774)
Modeling.createShape (Modeling.js:2541)
(anonymous) (Modeling.js:662)
forEach (index.esm.js:145)
CreateElementsHandler.preExecute (Modeling.js:626)
CommandStack._internalExecute (index.js:385)
CommandStack.execute (index.js:141)
Modeling.createElements (Modeling.js:2585)
(anonymous) (index.js:2295)
invokeFunction (index.js:2369)
EventBus._invokeListener (index.js:2220)
EventBus._invokeListeners (index.js:2205)
EventBus.fire (index.js:2166)
fire (index.js:1207)
end (index.js:1303)
trapClickAndEnd (index.js:1352)
1 Like

Thanks a lot, that sounds very helpful, I am not sure however it’s because of system-js cuz on my dev environment I use babel / rollupjs. maybe your explanation applies to one those instead.