I’m trying to roll my own Modeler following the corresponding walkthrough section.
But when I try to run my test.html file, I get module loading issues (as reported in Modeler.js not found):
I need to rewrite
import Modeler from 'bpmn-js/lib/Modeler';
import Modeler from 'bpmn-js/lib/Modeler.js';
Also, in Modeler.js, what does
import inherits from 'inherits';
mean? There is no such file in the folder bpmn-js/lib from where the Modeler.js file is imported and the browser throws an error >>Failed to resolve module specifier “inherits”. Relative references must start with either “/”, “./”, or “…/”.
I’m confused. What am I missing?
Can I only run the Modeler after bundling with webpack?
Hi @gwag and welcome to the community,
if you want to “roll your own Modeler”, then you indeed need to bundle with Webpack. See a full example here.
What are you trying to achieve in the first place? Maybe the pre-packaged Modeler is sufficient for you? This would not require you to use WebPack. See example here.
Of course rolling your own Modeler gives you more flexibility (e.g., loading of custom modules), but it really depends of your use-case whether you need that.
Thanks, Max, for your reply.
I’d like to set up a development environment of bpmn-js such that I can modify all three involved libraries. Therefore I have installed bpmn-js, bpmn-moddle and diagram-js in my project folder, along with their dependencies.
I tried bundling bpmn.js with Rollup. But I received the following error:
npx rollup test.js --file bundle.js --format iife
test.js → bundle.js...
(!) Unresolved dependencies
inherits (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/navigation/keyboard-move (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/navigation/movecanvas (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/navigation/touch (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/navigation/zoomscroll (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/align-elements (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/auto-scroll (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/bendpoints (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/connect (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/connection-preview (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/create (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/keyboard-move-selection (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/move (imported by bpmn-js\lib\Modeler.js)
diagram-js/lib/features/resize (imported by bpmn-js\lib\Modeler.js)
**[!] Error: Could not resolve './features/auto-place' from bpmn-js\lib\Modeler.js**
Did you try to start from this example repo here?
I would need a more complete view of your project setup to assist, would you be able to share?
The bundling example that you mentioned is not based on the bpmn-js dev environment with bpmn-js, bpmn-moddle and diagram-js installed in a project folder.
Can you point me to a code example that is based on the dev environment (as described in https://github.com/bpmn-io/bpmn-js/blob/master/docs/project/SETUP.md)?
you can execute this script with a minor change I did:
# Setup script to be executed in a bpmn.io project root (some empty folder chosen by YOU)
echo cloning repositories
git clone email@example.com:bpmn-io/diagram-js.git
git clone firstname.lastname@example.org:bpmn-io/bpmn-js.git
git clone email@example.com:bpmn-io/bpmn-moddle.git
echo setup diagram-js
echo setup bpmn-moddle
npm run build
echo setup bpmn-js
npm link ../diagram-js
npm link ../bpmn-moddle
echo all done.
Afterwards you can:
- You can run a bpmn-js modeler by doing:
npm run start
- Directly change
bpmn-js, the bpmn-js modeler will automatically pick up the changes
- Note that you might need to
npm run build again in the downstream libraries
- When you want to bundle your custom
bpmn-js modeler, just run the following inside
npm run distro