Integrate custom bpmn-js modeler in a web-app

Hi, I’m having issues on integrating the bpmn-js library in my web-app. The goal is to open a bpmn modeling container in the home page and to customise it by embedding the lib components in custom js code.

My project folder



<body style="background-color: white" class="has-fixed-nav">
	<div class="container ">
		<div class="row">
    			<div class="col l6 s12">
				<div class="col s12 ">
    					<ul id="moduleList" class></ul>
			<div class="col l6 s12">
				<div class="canvas" id="js-canvas" ></div>
<script type="module" src="bpmn-js/dist/app.js"></script>


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

import diagramXML from '../resources/newDiagram.bpmn';

var container = $('#js-drop-zone');

// BpmnModeler è def in Modeler.js. che estende BaseModeler

var modeler = new BpmnModeler({

container: '#js-canvas'



When I load index.html, the console

Uncaught TypeError: Error resolving module specifier “bpmn-js/lib/Modeler”. Relative module specifiers must start with “./”, “../” or “/”.

I tried to edit the Modeler path to ./bpmn-js/lib/ but I gt

GET http://localhost:8080/bpmn-js/dist/bpmn-js/lib/Modeler 404 not found

I’m sure the errors come from some issue in how I deal with folder paths in my includes, but I can’t figure out how to proceed, newby :slight_smile:

Any help is warmly welcome.

Thank you in advance


have you seen the bundling example? I believe this would solve your issue.



1 Like

The bundling example was useful indeed, THANK YOU for your help.
I just have an error when bundling the app.js file, this line

import diagramXML from './resources/newDiagram.bpmn';

makes the bundling fail with the following error

$ ./node_modules/.bin/webpack ./src/app.js -o public/app.bundled.js --mode development

asset main.js 1.9 MiB [emitted] (name: main)

runtime modules 1.13 KiB 5 modules

orphan modules 40 bytes [orphan] 1 module

modules by path ./node_modules/diagram-js/lib/ 568 KiB 187 modules

modules by path ./node_modules/bpmn-js/lib/ 484 KiB 131 modules

modules by path ./node_modules/diagram-js-direct-editing/ 15.1 KiB 3 modules

modules by path ./node_modules/object-refs/ 7.26 KiB

./node_modules/object-refs/index.js 97 bytes [built] [code generated]

./node_modules/object-refs/lib/refs.js 4.43 KiB [built] [code generated]

./node_modules/object-refs/lib/collection.js 2.74 KiB [built] [code generated]

modules by path ./src/ 4.22 KiB

./src/app.js 3.31 KiB [built] [code generated]

./src/resources/newDiagram.bpmn 932 bytes [built] [code generated] [1 error]

13 modules

ERROR in ./src/resources/newDiagram.bpmn 1:0

Module parse failed: Unexpected token (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See

> <?xml version="1.0" encoding="UTF-8"?>

| <bpmn2:definitions xmlns:xsi="" xmlns:bpmn2="" xmlns:bpmndi="" xmlns:dc="" xmlns:di="" xsi:schemaLocation=" BPMN20.xsd" id="sample-diagram" targetNamespace="">

| <bpmn2:process id="Process_1" isExecutable="false">

@ ./src/app.js 2:0-53

It does not like the .bpmn file.

Any help would be really appreciated.

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

ok, but my issue is dealing with webpack bundling which fails if in the src/app.js I import a .bpmn file…

What does your Webpack configuration look like? You need an appropriate loader to load BPMN diagram files.

For example:

module.exports = {
  module: {
    rules: [
        test: /\.bpmn$/i,
        use: [
            loader: 'file-loader',

THANK YOU! That did the trick

1 Like