Custom elements with bpmn js

Question

I am currently experiencing problems with a custom element that I created and added to my bpmn editor.

Specifically, I was able to create a new element with a custom name ("elmi:customTask"); this element is added to the palette and then I am able to add it to the editor. This element generates an XML code like this:

  <bpmn2:process id="Process_1">
        <elmi:customTask id="Activity_12zya2i"/>
    </bpmn2:process>

However, when I try to save the XML content I get several errors:

unhandled error in event listener TypeError: h is not a function
    at BpmnRenderer.drawShape (BpmnRenderer.js:1891:1)
    at BaseRenderer.js:30:1
    at invokeFunction (EventBus.js:534:1)
    at EventBus._invokeListener (EventBus.js:386:1)
    at EventBus._invokeListeners (EventBus.js:367:1)
    at EventBus.fire (EventBus.js:322:1)
    at GraphicsFactory.drawShape (GraphicsFactory.js:210:1)
    at GraphicsFactory.update (GraphicsFactory.js:269:1)
    at Canvas._addElement (Canvas.js:904:1)
    at Canvas.addShape (Canvas.js:921:1)

BpmnTreeWalker.js:97 failed to import <elmi:CustomTask id="Activity_12zya2i" />

BpmnTreeWalker.js:98 TypeError: h is not a function
    at BpmnRenderer.drawShape (BpmnRenderer.js:1891:1)
    at BaseRenderer.js:30:1
    at invokeFunction (EventBus.js:534:1)
    at EventBus._invokeListener (EventBus.js:386:1)
    at EventBus._invokeListeners (EventBus.js:367:1)
    at EventBus.fire (EventBus.js:322:1)
    at GraphicsFactory.drawShape (GraphicsFactory.js:210:1)
    at GraphicsFactory.update (GraphicsFactory.js:269:1)
    at Canvas._addElement (Canvas.js:904:1)
    at Canvas.addShape (Canvas.js:921:1)

The problem then occurs when I try to manually edit the XML code from my editor and then call the "SaveXML();" function. Same thing happens if I try to upload an XML file to the editor that contains my custom tag " <elmi:customTask id="Activity_12zya2i"/>"

Below are my main files that I use to add my custom component:

app.js:

// create modeler
const bpmnModeler = new BpmnModeler({
  container: containerEl,
  additionalModules: [
    customModule,
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    CamundaPlatformPropertiesProviderModule,
    ElementTemplatesPropertiesProviderModule,
    magicPropertiesProviderModule
  ],
  moddleExtensions: {
    elmi: elmiExtension,
    camunda: camundaModdlePackage,
    magic: magicModdleDescriptor
  },
  propertiesPanel: {
    parent: '#properties-panel-container'
  }
});

CustomPalette.js:

import { assign } from 'min-dash';

export default class CustomPalette {
  constructor(bpmnFactory, create, elementFactory, palette, translate) {
    this.bpmnFactory = bpmnFactory;
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;

    palette.registerProvider(this);
  }

  getPaletteEntries(element) {
    const {
      bpmnFactory,
      create,
      elementFactory,
      translate
    } = this;

    function createCustomTask() {
      return function(event) {
        const businessObject = bpmnFactory.create('elmi:CustomTask');
        const shape = elementFactory.createShape({
          type: 'bpmn:Task',
          businessObject: businessObject
        });
        create.start(event, shape);
      };
    }
    

    let actions = {
      'create.separato-mattoncini-custom': {
        group: 'mattoncini-custom',
        separator: true
      },
      'create.customTask': {
        group: 'mattoncini-custom',
        className: 'fas fa-cogs',
        title: translate('mattoncino custom'),
        action: {
          dragstart: createCustomTask(),
          click: createCustomTask()
        }
      }
    };

    return actions;
  }
}

CustomPalette.$inject = [
  'bpmnFactory',
  'create',
  'elementFactory',
  'palette',
  'translate'
];

CustomRender.js:

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import { is } from 'bpmn-js/lib/util/ModelUtil';
import { append as svgAppend, create as svgCreate } from 'tiny-svg';
import inherits from 'inherits';
import { assign } from 'min-dash';

const HIGH_PRIORITY = 1500;

function CustomRenderer(eventBus, bpmnRenderer) {
  BaseRenderer.call(this, eventBus, HIGH_PRIORITY);
  this.bpmnRenderer = bpmnRenderer;
}

inherits(CustomRenderer, BaseRenderer);

assign(CustomRenderer.prototype, {
  canRender: function(element) {
    return is(element, 'elmi:CustomTask');
  },

  drawShape: function(parentNode, element) {
    const shape = this.bpmnRenderer.drawShape(parentNode, element);
  
    // Aggiungi qui il tuo codice personalizzato per modificare l'aspetto dell'elemento
  
    return shape;
  },
  

  getShapePath: function(shape) {
    return this.bpmnRenderer.getShapePath(shape);
  }
});

CustomRenderer.$inject = ['eventBus', 'bpmnRenderer'];

export default CustomRenderer;

My JSON files with properties:

{
  "name": "Elmi",
  "prefix": "elmi",
  "uri": "http://example.com/elmi",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "CustomTask",
      "superClass": ["bpmn:Task"]
    }
  ]
}

This is what is generated when the custom element is added to the editor: img

This is what happens after clicking the "save" button.

The element disappears from the editor and these errors are shown: img

How can I prevent the error from occurring when I add my custom element?

Thanks

I've created a sandbox to recreate my error: https://codesandbox.io/s/friendly-albattani-rdjm4w?file=/index.html