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.
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.
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.
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.
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.