Custom Pathmap throws circular dependency error

I’m trying to create a custom SVG image for CustomTask of type ServiceTask. I referred these( ref1, ref2 ref3) articles to create the custom SVG.

When it executes, I’m getting Error: Cannot resolve circular dependency! (Resolving: bpmnRenderer -> pathMap -> pathMap).

// CustomPathMap
import BpmnRenderer from 'bpmn-js/lib/draw/BpmnRenderer';

export class CustomPathMap extends BpmnRenderer {

    static $inject = ['config.bpmnRenderer', 'eventBus', 'styles', 'pathMap'];

    constructor(config: any, eventBus: any, styles: any, pathMap: any) {
        super(config, eventBus, styles, pathMap, 1200);
    }

    
    drawShape(visuals, element) {
        if (is(element, "bpmn:ServiceTask")) {
            // return this.drawCustomTask(visuals, element);
            // todo
        }
    }
}


// modeler instance.

this.modeler = new RtBpmnModeler({
      container: '#js-canvas',
      keyboard: { bindTo: document },
      propertiesPanel: { parent: '#js-properties-panel' },
      additionalModules: [
      PropertiesPanelModule,
      PropertiesProviderModule,
      { __init__: 'pathMap', pathMap: ['type', CustomPathMap] },  // tried this => { [BPMN.InjectionNames.pathMap]: ['type', CustomPathMap] },
    ]
    });

Screenshot
image

Any lights on this issue.

You’re naming the thing pathMap and inject it (via static $inject) into itself.

The BpmnRenderer expect a pathMap in constructor. So, I’ve $inject and pass it as input to BpmnRenderer constructor.

And you’re naming it pathMap yourself:

...
      { __init__: 'pathMap', pathMap: ['type', CustomPathMap] },  // tried this => { [BPMN.InjectionNames.pathMap]: ['type', CustomPathMap] },
...

Choose a different name for your custom service to fix this issue.

hello, where can i import BPMN.InjectionNames

What do you mean by BPMN.InjectionNames?