Hello, I’m rather new to BPMN.io and I’ve got this error when running my code. I don’t really know how to solve it as I believe everything should be working correctly within my code.
The whole error mesage is this:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘bpmnElement’)
at getDiagramsToImport (bpmn-modeler.development.js:16886:41)
at render (bpmn-modeler.development.js:16825:30)
at bpmn-modeler.development.js:16856:9
at new Promise ()
at importBpmnDiagram (bpmn-modeler.development.js:16847:12)
at Modeler.open (bpmn-modeler.development.js:17394:32)
at Modeler.importDefinitions (bpmn-modeler.development.js:17333:31)
at Modeler.importXML (bpmn-modeler.development.js:17282:39)
Everything seems to happen within the library and I’m a bit lost on what to do. My code generates the diagram dynamically using an excel and some C# code to transform the excel into something the library can run.
Did you validate your diagram against the BPMN 2.0 XML schema using an XSD validator to determine if it is valid BPMN? I’d consider you to do it to prevent silly mistakes such as malformed xsd:id elements (numbers only).
Once everything is there you can check the diagram for import errors and warnings, cf. bpmn-js usage.
But really, your first “quality gate” should be a passing XSD schema validation (against the BPMN 2.0 XML schema).
Now, I tried using an XML validator and it said everything was fine. I already installed everything with the prepackage version so there is no error with the imports and yet the same error keeps happening “Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘bpmnElement’)”. If you have any other ideas as to why this happens I would appreciate it.
Now, I tried using an XML validator and it said everything was fine.
I’ve used this online validator and can confirm that validation works just fine, if you attach the BPMN schema inside an xsi:schemaLocation attribute. This is what I indicated earlier, this is what the validator tells you about. Of course your diagram is structural valid XML, that does not make it a valid BPMN 2.0 document.
Yes I checked both in the code, no warnings nor indications of any problem, and in the browser console, no warnings or indications of problems with the imports.
Using the online editor I’ve noticed that the problem may be in the way I name my tasks, gates and flows. Because it seems it is not accepted by the editor. Thank you for answering again and sorry for bothering it’s my first time using this library and I’m a bit green on the edges
I tried validating it in different XML validators and they always say it’s valid but when I try to use it on the online editor of BPMN-js no diagram is shown.
The difference now is that there is no “error” so I don’t know what to do now. Could you tell me any ideas of what I’m doing wrong? The same problem keeps showing in the developer console no matter what I change in the XML
Well well, now you need to add a DI section, cf. my example. The DI section defines how the process (that you now defined in a sound manner) is displayed.
Basically a list of shapes and connections, with their waypoints, referencing the actuall process elements:
<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd http://www.omg.org/spec/DD/20100524/DC https://www.omg.org/spec/BPMN/20100501/DC.xsd http://www.omg.org/spec/BPMN/20100524/DI https://www.omg.org/spec/BPMN/20100501/BPMNDI.xsd http://www.omg.org/spec/DD/20100524/DI https://www.omg.org/spec/BPMN/20100501/DI.xsd" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
<!-- the semantic process -->
<bpmn:process id="Process_1" isExecutable="false">
<bpmn:startEvent id="StartEvent_1" />
</bpmn:process>
<!-- defines display of process -->
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<!-- a "diagram to display" -->
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<!-- a shape on the canvas -->
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
<dc:Bounds x="173" y="102" width="36" height="36" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>
I now know that my error happens when I call the viewer library. Would you know what exactly I’m doing wrong? Because I added the DI section and yet I’m not getting any result. Sorry for bothering you again.
Also, when I try to run the XML in the online editor I get this, which I get is the DI section:
@Ewent You’d want to read my comments more carefully. If I share a full BPMN diagram with a working bpmndi section I’d expect you to show me how your diagram contains such section.
Consider reviewing my previous comments and see what is going on in your diagram. Use the techniques you already learned (check XSD schema validation, import errors, …) to pin down your issue.
there you can check the diagram for import errors and warnings, cf. 
