How define the moddleExtensions on a custom-bundle version of BPMN io

Hello, i have been trying to add the Camunda Moddle to my custom modeler, bundled by the rollup.js.
I use the example project from github:

and using the properties panel example to know how to add the camundaModdle and provider:

I ended with this “custom-modeler.js” file:

import inherits from 'inherits';

import Modeler from 'bpmn-js/lib/Modeler';

import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';

import TokenSimulationModule from 'bpmn-js-token-simulation/lib/viewer';
import SimulationSupportModule from 'bpmn-js-token-simulation/lib/simulation-support';
import LogModule from 'bpmn-js-token-simulation/lib/features/log';

import {
CamundaPlatformPropertiesProviderModule} from 'bpmn-js-properties-panel';

import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json'

 * A viewer that includes mouse navigation and other goodies.
 * @param {Object} options
export default function CustomModeler(options) {, options);

inherits(CustomModeler, Modeler);

CustomModeler.prototype._customModules = [

CustomModeler.prototype._modules = [].concat(

CustomModeler.prototype.GetCustomModdleExtensions = function () {
  return CamundaBpmnModdle;

// CustomModeler.prototype.moddleExtensions = {
//   camunda: CamundaBpmnModdle,
// };

Noticed that the moddleExtesions prototype is comented cause for some reason the CamundaBpmnModdle ends up not configured in the bundled version, so every time i try to use it in my AngularJS applciation, i got a error saying that “<camundaBpmn…> not regonized” os something like that.

The solution by now was exposing the “CamundaBpmnModdle” through a prototype call “CustomModeler.prototype.GetCustomModdleExtensions” and them pass it to the front end component this way:

  if (that.bpmnJS == undefined) {
            that.bpmnJS = new modeler({
                container: element,
                propertiesPanel: {
                    parent: '#properties-panel'
                keyboard: {
                    bindTo: document
                moddleExtensions: {
                    camunda: modeler.prototype.GetCustomModdleExtensions()
                additionalModules: [

I would like to ask for a better way to configure the camunda, cause the way that a manage to make it work seens pretty messed up.

Thanks o/

Why is that necessary in the first place? You could simply import the model extension and pass it when creating the bpmn-js instance.

I couldn’t import the moddle Extension the simple way:

import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json'
                moddleExtensions: {
                    camunda: CamundaBpmnModdle,

cause i am using and instancing my bpmn js component in a front end application in AngularJS (using plain javascript), so i am not able to use import there.

Also, i am exporting the BPMN nodeJS project as a UMD bundle and importing it in my angularJS application, so i dont have full access to all stuff inside nodeJs aplication, just de global variable “bpmnJS” with it’s scope.

I tried using the same approach used in the bundled example, setting the moddleExtesions in prototype inside de nodeJS application. It worked fine for the properties menu who is a Module, but i was not able to use it for moddleExtensions.

You could just bundle the model extension with the Angular app which is where you create the bpmn-js instance. Would that be an option?