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.

@Niklas_Kiefer Hi, could you please help to understand the steps.

  1. Build and app similar to bpmn-js-examples/modeler at master · bpmn-io/bpmn-js-examples · GitHub
  2. Bundle it using webpack (it created files in public/vendor folder)
  3. What is the next step? How do I plug above bundle into my app?

@Niklas_Kiefer Any thoughts?

To solve the error, set the type attribute to module when loading the script in your HTML code. When working with ECMAScript modules and JavaScript module import statements in the browser, you’ll need to explicitly tell the browser that a script is module. To do this, you have to add type=“module” onto any ‹script› tags that point to a JavaScript module. Once you do this you can import that module without issues.

<script type="module" src="./index.js"></script>

If you are working on Node.js or react applications and using import statements instead of require to load the modules, then ensure your package.json has a property “type”: “module” as shown below.

{
  // ...
  "type": "module",
  // ...
}

Moreover, In some cases, you may have to use both import and require statements to load the module properly.

// import { parse } from 'node-html-parser';
parse = require('node-html-parser');

This error "Cannot use import statement outside a module " can happen in different cases depending on whether you’re working with JavaScript on the server-side with Node.js , or client-side in the browser. There are several reasons behind this error, and the solution depends on how you call the module or script tag.