Extension Elements cleared when loading xml in modeler editor

Hello,
I am using the Modeler in View-Mode and in Edit-Mode. I wrote Custom Elements with Extensions and so far everything is working fine. Following scenario is not working:

  1. Create custom element with extension and save the diagram
  2. Change from edit mode to view mode (everything is showing fine)
  3. Change from view mode to edit mode → extensions are included in the xml but are cleared

XML before:

<bpmn:dataStoreReference id="DataStoreReference_1rvek2g" taskType="PAINPOINT">
  <bpmn:extensionElements>
    <qa:contextInformations taskType="PAINPOINT" />
  </bpmn:extensionElements>
</bpmn:dataStoreReference>

XML after changing from view back to edit mode:

<bpmn:dataStoreReference id="DataStoreReference_1rvek2g" taskType="PAINPOINT">
  <bpmn:extensionElements />
</bpmn:dataStoreReference>

I load the xml in both viewer and editor with the bpmnModeler.importXML() method

Hi @blaubunt, welcome to the forum!

That looks like a custom moddle extension. Did you add those moddle extensions when initializing your Modeler / Viewer?

Can you share your custom bpmn-js application in a way we can inspect it? E.g. via codesandbox.

Thank you for your reply! Yes I registered it like in the custom elements example.

moddleExtensions: {
          qa: customElementExtension
        },

this code is when initializing the Modeler, where customElementExtension is the json file with the custom element.

Unfortunately my Project is very large and complex so I can not really share the whole code.

But I assume that it somehow has to do with the xml import to the Modeler in editing mode. I inspected the xml and the extension is inside the xml until it is loaded with the Modeler in editing mode, then it gets erased. With the Viewer everything works fine.

Would it be possible to share the moddle extension JSON file + how you initialize Modeler / Viewer + any other custom bpmn-js modules (in case you have some)?

Sure,
customElementType.json

{
    "name": "CustomElementType",
    "uri": "http://some-company/schema/bpmn/qa",
    "prefix": "qa",
    "xml": {
      "tagAlias": "lowerCase"
    },
    "types": [
      {
        "name": "CustomElement",
        "extends": [
          "bpmn:FlowNode"
        ],
        "properties": [
          {
            "name": "taskType",
            "isAttr": true,
            "type": "String"
          }
        ]
      },
      {
        "name": "contextInformations",
        "superClass": [ "Element" ],
        "properties": [
          {
            "name": "taskType",
            "isAttr": true,
            "type": "String"
          }
        ]
      }
    ],
    "emumerations": [],
    "associations": []
  }

Initialization of Modeler

this.BpmnModeler = new BpmnModeler({
        container: container,
        propertiesPanel: {
          parent: "#properties-panel"
        },
        additionalModules: [customControlsModule],
        moddleExtensions: {
          camunda: camundaModdleDescriptor,
          qa: customElementExtension
        },
      });

The customControlsModule is build exactly like bpmn-js-example-custom-elements/app/custom at master · bpmn-io/bpmn-js-example-custom-elements · GitHub this. I also checked out this code and replaced my Module with this but the error is the same. Whenever I reload the xml in the modeler/editor the extension elements are cleared. When I reload it in the viewer everything works fine

How does this “switching” look like? Are you

  1. exporting the XML from a Modeler via modeler.saveXML
  2. importing the XML into a Viewer via viewer.importXML
  3. exporting the XML from a Viewer via viewer.saveXML
  4. importing the XML into a Modeler via modeler.importXML

and back and forth?

Thank you for your help. After cleaning everything completely (node_modules and rebuilding the whole project) It seems to work. I dont know why this behavious happended but now it is working.

It was working for a while but not the same code doesnt work. I dont know where the problem is but as it worked for a while I assume it is not in the code.
Switching looks like you described it except we are not exporting the xml in the viewer since there are no changes to the xml. We export it from the editor to import into viewer and then import it back into editor. On exporting the extensionElements are there and visible in the xml but after importing the extensionElements are cleared.

I am also saving the file on the drive for persistence and there the extension Elements are always there, but if I import it into the viewer or the editor sometimes they get cleared

I think I traced down the issue:
I logged the output of the xml import and got back a warning:

"Error: unknown type <qa:ContextInformations>
    at Registry.mapTypes (webpack-internal:///./node_modules/moddle/dist/index.esm.js:525:11)
    at Registry.getEffectiveDescriptor (webpack-internal:///./node_modules/moddle/dist/index.esm.js:550:8)
    at BpmnModdle.Moddle.getType (webpack-internal:///./node_modules/moddle/dist/index.esm.js:775:32)
    at ElementHandler.getPropertyForNode (webpack-internal:///./node_modules/moddle-xml/dist/index.esm.js:424:25)
    at ElementHandler.handleChild (webpack-internal:///./node_modules/moddle-xml/dist/index.esm.js:479:23)
    at ElementHandler.BaseElementHandler.handleNode (webpack-internal:///./node_modules/moddle-xml/dist/index.esm.js:263:19)
    at handleOpen (webpack-internal:///./node_modules/moddle-xml/dist/index.esm.js:812:26)
    at eval (webpack-internal:///./node_modules/moddle-xml/dist/index.esm.js:871:7)
    at parse (webpack-internal:///./node_modules/saxen/dist/index.esm.js:1047:13)
    at Parser.parse (webpack-internal:///./node_modules/saxen/dist/index.esm.js:301:5)"

with the message:

"unparsable content <qa:contextInformations> detected
	line: 6
	column: 8
	nested error: unknown type <qa:ContextInformations>"

When I save my extension “contextInformations” it is written with a lower case first letter but apparently when loading the xml it cant parse this because it is expecting it to be written with capital first letter. I completely searched my code and I never write it with a capital letter. When I do, everything works fine. Is this some kind of convention to be followed? Funny thing is, if I write it with capital first letter in my code and save it to xml, it is written with a lower first letter inside the xml.

<bpmn:extensionElements>
    <qa:contextInformations taskType="ACDSF"  />
</bpmn:extensionElements>

The issue is that you define your types lowercase:

"name": "contextInformations",

but also use

"xml": {
  "tagAlias": "lowerCase"
},

Change the definition to

"name": "ContextInformations",

and you should be fine.