Extending the Custom Bundle example with the Properties Panel

Developers Modeler
1

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?

2

Have you tried changing this to this:

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

3

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

4

@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

5

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

6

I had the same problem @8bitoverflow , How did you solve it?image image

7

i solve that ！， can’t use

import xxxxx form 'xxxx' ->  const xxx = require('xxxxx')