Stuck up with integrating magic tab with camunda modeler property panel

I am trying to integrate custom tab to a property panel following the github repo : bpmn-js-examples/properties-panel-extension at main · bpmn-io/bpmn-js-examples · GitHub

but for some reasons, I am not able to see my plugin getting added.

I used the following code to link the plugin to camunda

import BpmnModeler from ‘bpmn-js/lib/Modeler’;

import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule
} from ‘bpmn-js-properties-panel’;

import magicPropertiesProviderModule from ‘./provider/magic’;
import magicModdleDescriptor from ‘./descriptors/magic’;

const bpmnModeler = new BpmnModeler({
container: ‘#js-canvas’,
propertiesPanel: {
parent: ‘#js-properties-panel
},
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
magicPropertiesProviderModule
],
moddleExtensions: {
magic: magicModdleDescriptor
}
});

it doesn;t show any effect

when i use an alternate approach as follows

import BpmnModeler from ‘bpmn-js/lib/Modeler’;

import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule
} from ‘bpmn-js-properties-panel’;

import magicPropertiesProviderModule from ‘./provider/magic’;
import magicModdleDescriptor from ‘./descriptors/magic’;

const bpmnModeler = new BpmnModeler({
container: ‘#js-canvas’,
propertiesPanel: {
parent: ‘#js-properties-panel
},
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
magicPropertiesProviderModule
],
moddleExtensions: {
magic: magicModdleDescriptor
}
});

I face the error :

overriding handler for command <properties-panel.multi-command-executor>
at CommandStack._setHandler (webpack://camundanode_modules/diagram-js/lib/command/CommandStack.js:551:0)
at CommandStack.register (webpack://camundanode_modules/diagram-js/lib/command/CommandStack.js:313:0)
at CommandStack.registerHandler (webpack://camundanode_modules/diagram-js/lib/command/CommandStack.js:331:0)
at file:///Users/naveikumar/camunda-modeler/resources/plugins/pluginThalapathy/client/app.js:9433:20
at forEach (webpack://bpmnnode_modules/bpmn-js-properties-panel/node_modules/min-dash/dist/index.esm.js:246:0)
at file:///Users/naveikumar/camunda-modeler/resources/plugins/pluginThalapathy/client/app.js:9432:55
at invokeFunction (webpack://camundanode_modules/diagram-js/lib/core/EventBus.js:614:0)
at EventBus._invokeListener (webpack://camundanode_modules/diagram-js/lib/core/EventBus.js:457:0)
at EventBus._invokeListeners (webpack://camundanode_modules/diagram-js/lib/core/EventBus.js:431:0)
at EventBus.fire (webpack://camundanode_modules/diagram-js/lib/core/EventBus.js:379:0) [ error ]
This error may be the result of a plug-in compatibility issue. [ info ]
Disable plug-ins (restarts the app) [ info ]

can someone help me here, as i am pretty new to node js and bpmn.io

Hi @Navein_Kumar, welcome to the forums! I suggest you post this topic on the bpmn.io forums (https://forum.bpmn.io) - you are likely to get much better assistance there!