Walkthrough guidance

I am going through the bpmn.js walkthrough

May be because of my little knowledge on npm i am stuck into “Install the library part” that i copy and paste here

COPIED PART STARTS HERE

First install bpmn-js via npm:

npm install bpmn-js

Then access the BPMN modeler via an ES import :

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

// create a modeler
var modeler = new Modeler({ container: '#canvas' });

// import diagram
modeler.importXML(bpmnXML, function(err) {
  // ...
});

COPIED PART ENDS HERE

Could you please suggest how should i use the info above?

I created an almost empty HTML page:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="index.js"></script>

</head>

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

</body>
</html>

and this index.js file:

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

// create a modeler
var modeler = new Modeler({ container: '#canvas' });

// import diagram
modeler.importXML(bpmnXML, function(err) {
  // ...
});

by opening index.html i would expect to see at least the green bpmn.js icon in the webpage because a modeler gets created.

By checking the errors i see
Uncaught SyntaxError: Cannot use import statement outside a module

i am missing something about bpmn-js/lib/Modeler and my webpage.
I tried to add <script src="\node_modules\bpmn-js\lib\Modeler.js"</script> to the head of my html file but no success. Here i feel i miss some npm basic knowledge.
Could you please give me some guidance to fix this?
Thanks a lot!

If you want to use es-features, like import, you will have to bundle your app first before using it inside the browser. You can follow this example for guidance.

Hello. Thanks for the reply. I managed to run the app using npm run dev and i saw it running in localhost:8080

There is a ton of material to digest to master all that example, to stay on my initial problem could you please guide me on the “bundling” thing? How the example has bundling?
Otherwise stated: how to get rid of Uncaught SyntaxError: Cannot use import statement outside a module?

My only experience with bundling is with browserify, that is used to solve the requre calls no the import ones and moreover please be patient and consider I am quite a total beginner.

Thanks.

I realized also the moedler example, in the App folder, has the same problem: opening \app\index.html the app.js linked by that html starts with
import $ from 'jquery';
and this gives the same error
Uncaught SyntaxError: Caannot use import statement outside a module? in the javascript console

but in the public folder app.js seems bundled and in fact it works.

By reading package.json i found webpack is mentioned there and i realized it is one pretty famous bundler. So i will study bundlers and try to transition from a simple app.js to the bundled one to see if i manage to master this concept.

1 Like

Good luck in learning that bundling stuff :+1:

Note that you can use the modeler pre-packaged, as well:

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

<!-- replace CDN url with local bpmn-js path -->
<script src="https://unpkg.com/bpmn-js/dist/bpmn-modeler.development.js"></script>

<script>
   var BpmnModeler = window.BpmnJS;

   var modeler = new BpmnModeler({ container: '#canvas' });
   ...
</script>

So at this point it is not strictly necessary to dive into JavaScript module bundling. However, the moment you start customizing or building complex client side applications you will likely get in touch with bundling anyway.

Hope this helps as an additional clarification.

Thanks a lot for the information: as you say likely i cannot avoid to explore bundling sooner or later, but to make the learning curve a bit mot gentle the prepackaged modeler is a good trick.

I will try it as soon as I have time to study.

Thank you again.