Extending the Custom Bundle example with the Properties Panel

I’m looking to extend the custom bundle example with the properties panel and have been running into some issues. After adding bpmn-js-properties-panel to the dependencies of package.json I updated the custom-viewer.js of the custom bundle example as follows:

import inherits from 'inherits';

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

import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
import CustomLoggingModule from './features/logging';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/bpmn';

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

inherits(CustomViewer, Viewer);

CustomViewer.prototype._customModules = [
    ZoomScrollModule,
    MoveCanvasModule,
    CustomLoggingModule,
    propertiesPanelModule,
    propertiesProviderModule
];

CustomViewer.prototype._modules = [].concat(
    Viewer.prototype._modules,
    CustomViewer.prototype._customModules
);

After rollup bundles the javascript when I try to load index.html I receive the following error in the web console:

Uncaught TypeError: Cannot read property '__depends__' of undefined
    at visit (custom-viewer.bundled.js:5638)
    at Array.forEach (<anonymous>)
    at visit (custom-viewer.bundled.js:5638)
    at Array.forEach (<anonymous>)
    at bootstrap (custom-viewer.bundled.js:5651)
    at createInjector (custom-viewer.bundled.js:5688)
    at CustomViewer.Diagram (custom-viewer.bundled.js:5744)
    at CustomViewer.Viewer._init (custom-viewer.bundled.js:17126)
    at CustomViewer.Viewer (custom-viewer.bundled.js:16677)
    at CustomViewer.Modeler (custom-viewer.bundled.js:48074)

I’ve tried a few different ways of loading the properties panel modules but always seem to end up with this result. Any clue where I’m going wrong?

Have you tried changing this to this:

The custom bundle example imports Viewer from bpmn-js/lib/Viewer, not exactly sure but might help.

One of your modules is undefined. This should be easy to debug. This example might help you: https://codesandbox.io/embed/bpmn-js-custom-modeler-senuf

@oguzeroglu - Unfortunately the same behavior is seen with both the Viewer and Modeler

@philippfromme - I’ve only been able to produce the error while using the generated custom-viewer-bundled.js from the example (with the properties-panel stuff included). When using the libraries directly instead of the rollup I don’t see this error

I’ve dug a little deeper into what is actually undefined – It looks like the propertiesPanel and propertiesProvider module’s __depends__ array contains an undefined that gets hit on bootstrapping:

error

Can you share an example that I can try out and debug?