Problem with bpmn-js in Express

Hi!
I have problem!
I create Web Application NodeJS + Express.
C:\Users\SChaikovskiy>npm install express-generator -g
C:\Projects>express -v ejs -c sass CamundaModelerJS
create page for modeler: modeler.ejs and try add modeler.

  1. If i add “import BpmnModeler from ‘bpmn-js/lib/Modeler’;” in page(modeler.ejs) then
    %D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5
    code of page below:

<!DOCTYPE html>
<html lang="en">
        
<head>
        
    <meta charset="UTF-8">
    <title>Дизайнер процесса</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    

    <!-- example styles -->
    <style>
        html, body, #canvas {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .diagram-note {
            background-color: rgba(66, 180, 21, 0.7);
            color: White;
            border-radius: 5px;
            font-family: Arial;
            font-size: 12px;
            padding: 5px;
            min-height: 16px;
            width: 50px;
            text-align: center;
        }
        .needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
            stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
        }
        #save-button {
            position: fixed;
            bottom: 20px;
            left: 20px;
        }
    </style>
</head>

<body>

<div id="canvas"></div>

<button id="save-button">Сохранить</button>

<script>
    
    
    var diagramUrl = 'http://localhost:8080/rest/engine/default/process-definition/key/LandCoordinationProcess/xml';
    import BpmnModeler from 'bpmn-js/lib/Modeler';
    
    var bpmnModeler = new BpmnModeler({
        container: '#canvas',
        keyboard: {
            bindTo: window
        }
    });

    /**
     * Save diagram contents and print them to the console.
     */
    function exportDiagram() {
        bpmnModeler.saveXML({ format: true }, function(err, xml) {
            if (err) {
                return console.error('could not save BPMN 2.0 diagram', err);
            }

            console.log('DIAGRAM', xml);


            $.ajax({
                type: "POST",
                url: 'http://localhost:8080/SaveBPMModel',
                data: {
                    strXml: xml,
                },
                success: function (data) {
                    alert("Сохранено!");

                }
            });


        });

    }

    $.get(diagramUrl, function(bpmnXML) {
        bpmnModeler.importXML(bpmnXML.bpmn20Xml, function(err) {
            if (err) {
                return console.error('could not import BPMN 2.0 diagram', err);
            }

            var canvas = bpmnModeler.get('canvas');

            //canvas.zoom('fit-viewport');

            });
        });

    $('#save-button').click(exportDiagram);

</script>

</body>
</html>
  1. if add import in modeler.js(router), error in start
    C:\Projects\CamundaModelerJS>npm start

camundamodelerjs@0.0.0 start C:\Projects\CamundaModelerJS
node ./bin/www

C:\Projects\CamundaModelerJS\routes\modeler.js:8
import bpmnModeler from ‘bpmn-js/lib/Modeler’;
^^^^^^^^^^^

SyntaxError: Unexpected identifier
at new Script (vm.js:84:7)
at createScript (vm.js:264:10)
at Object.runInThisContext (vm.js:312:10)
at Module._compile (internal/modules/cjs/loader.js:694:28)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:745:10)
at Module.load (internal/modules/cjs/loader.js:626:32)
at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
at Function.Module._load (internal/modules/cjs/loader.js:558:3)
at Module.require (internal/modules/cjs/loader.js:663:17)
at require (internal/modules/cjs/helpers.js:20:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! camundamodelerjs@0.0.0 start: node ./bin/www
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the camundamodelerjs@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SChaikovskiy\AppData\Roaming\npm-cache_logs\2019-04-03T08_04_19_219Z-debug.log

code:

var express = require('express');

var router = express.Router();

//var BpmnModeler = require('bpmn-js/lib/Modeler');

/* GET modeler page. */

router.get('/', function(req, res, next) {

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

res.render('modeler', { title: 'Express' });

});

module.exports = router;
  1. OR
    %D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

Hi @11110,
the error occurs because you use es6 modules inside your application. You will need to use babel or something else to enable it. Furthermore, see this example for possible guidance.

1 Like

This topic was automatically closed after 7 days. New replies are no longer allowed.