Bmpn-js Error: unparsable content

Users
1

I just got started with JavaScript and tryed to setup bpmn-js from the GitHub page.
I copied the created “dist”-Folder, which was created by running “npm run dev” into a seperate directory. There I created am html-file following this tutorial (Walkthrough | bpmn.io). This is what my index.html looks like right now:

<html>
<body>
    <!-- BPMN diagram container -->
    <div id="canvas"></div>

    <!-- replace CDN url with local bpmn-js path -->
    <script src="./dist/bpmn-viewer.development.js"></script>

    <script>
        // the diagram you are going to display
        const bpmnXML = "./diagram.bpmn";

        // BpmnJS is the BPMN viewer instance
        const viewer = new BpmnJS({ container: '#canvas' });

        async function showBPMN() {
            // import a BPMN 2.0 diagram
            try {
                // we did well!
                await viewer.importXML(bpmnXML);
                viewer.get('canvas').zoom('fit-viewport');

            } catch (err) {
                // import failed :-(
                console.log(err);
            }
        }
        showBPMN();
    </script>
</body>
</html>

I keep get this error in Google Chrome’s console:

Error: unparsable content ./diagram.bpmn detected
	line: 0
	column: 0
	nested error: missing start tag
    at error$1 (bpmn-viewer.development.js:12707)
    at handleError (bpmn-viewer.development.js:13356)
    at handleError (bpmn-viewer.development.js:11759)
    at parse (bpmn-viewer.development.js:12335)
    at Parser.parse (bpmn-viewer.development.js:11864)
    at bpmn-viewer.development.js:13527
    at new Promise (<anonymous>)
    at Reader.fromXML (bpmn-viewer.development.js:13522)
    at BpmnModdle.fromXML (bpmn-viewer.development.js:14471)
    at bpmn-viewer.development.js:18946

The diagram.bpmn file was created using BPMN editor | demo.bpmn.io

2

Hi @Leo0001 , welcome!

How is this supposed to work? Where did you get this code snippet from? I believe this won’t fetch your XML content, if you don’t include some bundling magic.

The viewer starter example is showing how to fetch a diagram correctly (e.g. via jquery, or the basic fetch API).

1 Like