Problem with bpmn-js in Express


#1

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

#2

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.


closed #3

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