Error: overriding handler for command <propertiesPanel.removeTemplate>

[BrianHuf]

This code is throwing an exception. I can’t figure what I’m doing differently from a test case from within bpmn-js-element-templates (should import simple process (cloud-templates))

Here’s a repo that reproduces the problem

Here’s a summary of import bits

import BpmnModeler from "camunda-bpmn-js/lib/camunda-platform/Modeler";
import {
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    ZeebePropertiesProviderModule,
} from "bpmn-js-properties-panel";
import ZeebeModdle from "zeebe-bpmn-moddle/resources/zeebe";
import ZeebeBehaviorsModule from "camunda-bpmn-js-behaviors/lib/camunda-cloud";
import ElementTemplateChooserModule from "@bpmn-io/element-template-chooser";
import ElementTemplatesIconsRenderer from "@bpmn-io/element-template-icon-renderer";
import LintingModule from "@camunda/linting/modeler";
import {
    CloudElementTemplatesPropertiesProviderModule,
} from "bpmn-js-element-templates";

....
       new BpmnModeler({
            container: editor.current,
            additionalModules: [
                ZeebeBehaviorsModule,
                BpmnPropertiesPanelModule,
                BpmnPropertiesProviderModule,
                ZeebePropertiesProviderModule,
                CloudElementTemplatesPropertiesProviderModule,
                ElementTemplateChooserModule,
                ElementTemplatesIconsRenderer,
                LintingModule,
            ],
            linting: {
                active: true,
            },
            keyboard: {
                bindTo: document,
            },
            moddleExtensions: {
                zeebe: ZeebeModdle,
            },
            propertiesPanel: {
                parent: properties.current,
            },
            elementTemplates,
        });

Error thrown

react-dom.development.js:22839 Uncaught Error: overriding handler for command <propertiesPanel.removeTemplate>
    at CommandStack._setHandler (CommandStack.js:551:1)
    at CommandStack.register (CommandStack.js:313:1)
    at CommandStack.registerHandler (CommandStack.js:331:1)
    at registerHandlers$1 (index.js:10:1)
    at Injector.invoke (index.esm.js:226:1)
    at index.esm.js:326:1
    at Array.forEach (<anonymous>)
    at index.esm.js:320:1
    at index.esm.js:440:1
    at Array.forEach (<anonymous>)

Any ideas?

[nikku]

This tells you that someone else (before you) already registered a command handler with the name propertiesPanel.removeTemplate. You’d want to prevent that from happening.

If you want to plug in before, after, or during the execution of a particular command the CommandInterceptor offers you loads of hooks.

What would you like to accomplish?

---

To get to the bottom of this issue you could log (debug) who registers the propertiesPanel.removeTemplate, which should happen twice.

[BrianHuf]

By setting a break point within CommandStack.prototype._setHandler, I was able to find the command being registered by both element-templates and cloud-element-templates.

With some trial and error, I found that one of registrations comes from CloudElementTemplatesPropertiesProviderModule. I can reproduce the error with a reduced set of additionalModules

        modeler.current = new BpmnModeler({
            container: editor.current,
            additionalModules: [
                CloudElementTemplatesPropertiesProviderModule,
            ],
...

If I remove all additionalModules, I notice that the propertiesPanel.removeTemplate is still being registered. It appears BpmnModeler is registering the command and no additionalModules would be allowed to override

        modeler.current = new BpmnModeler({
            container: editor.current,
            additionalModules: [].
...

I’ve no idea where to go from here.

Is there an example application that uses CloudElementTemplatesPropertiesProviderModule? I’m unsuccessful in converting the Karma system tests into applications

In the end, I’m primarily looking to use bpmn-js-create-append-anything, which from what I understand, Camunda 8 is needed

[BrianHuf]

Found the solution

When using Camunda 7 (aka platform) related modules, use this
import BpmnModeler from "camunda-bpmn-js/lib/camunda-platform/Modeler";

When using Camunda 8 (aka cloud) related modules, use this
import BpmnModeler from "camunda-bpmn-js/lib/camunda-cloud/Modeler";

For the above code, switching to the latter avoids the error.

PS: If I may gush a bit, this is a wonderful library. It feels like a master class on how to provide high levels of functionality and extensibility. Thanks for making it available in the open source!