Help with using the Modeler: Javascript error: "require" not defined

Developers
1

I want to build some tooling around the BPMN modeler. I was able to successfully build it via

> grunt
...

But I am still confused how it can be used.

I copied the index.html from the example project and when trying to open it in the browser I get the following error in the JavaScript console:

Uncaught ReferenceError: require is not defined

The error seems to originate from the first statement in the index.js file:

var fs = require('fs');

Do i need to install anything else to make it work? I am pretty new to this , and am not able to find much information.

Any help is appreciated

Best Regards
Ani

Answer

We recommend you to use the prepackaged version of bpmn-js.

Unless you use the prepackaged version of bpmn-js the modeler needs to be bundled for the browser with Browserify or Webpack. This is because it relies on external resources (such as fs) via require and the browser is not able to resolve these dependencies.

The modeler example generates the browser bundle into the dist folder. You’d need to serve the dist folder with a web server to get it working.

See posts below for details.

2

Hi,
does anyone know more about this?

I am stuck on this. May be this is related to how you deploy a Node.js application as a web Application. In my case I just put the entire “dist” folder , in the WEB-INF folder in tomcat.

Once the application is built are there any instructions for how to deploy it as a Web Application or integrate it with existing Web Application.

Any help/pointers are appreciated.

Regards
Ani

3

The modeler is a web based javascript component. You would need to integrate it into any website just like you’d integrate jQuery or the like. It does not provide any backend.

It already has a pretty well documented API. We are working on providing it to you as a user. Stay tuned on this.

4

I’d suggest you to use the bundled version of our modeler to get started. It allows you mask all the internals / build tools and so forth.

The seed project may be a good place to get started, too.

5

The Bundled version seems to be a viewer, and reads a bpmn diagram
I also checked the ‘modeler’ sample project. It also contains javascript files which start with something like

require("fs")

When executed javascript is not able to find the requrie() function.

It does look like fs module is being used for reading the file.

Even the bundled version does not seem to be having any such module.

So the question is do we need fs , which is part of “node.js” for the modeler to work
And how can the require() function be resolved

Is there any ready to install bundle with all scripts available?

6

The modeler is also available as a bundled version and it should be possible for you to replace the viewer in the seed project with the modeler.

If you would like to try out the modeler example, follow the instructions in projects README.md and ensure you correctly bundle the app. fs is a module provided by NodeJS that is being removed during bundling. You do not need nor should provide a fs module in the browser.

7

I did follow the instructions you mentioned. The README.md states it is NodeStyle application.

As per the readme when ‘grunt’ is executed, i get

Running "jshint:src" (jshint) task
Linting app\index.js ...ERROR
[L15:C3] E007: Missing "use strict" statement.
  openDiagram(newDiagramXML);
[L20:C3] E007: Missing "use strict" statement.
  renderer.importXML(xml, function(err) {
[L41:C3] E007: Missing "use strict" statement.
  renderer.saveSVG(done);
[L46:C3] E007: Missing "use strict" statement.
  renderer.saveXML({ format: true }, function(err, xml) {
[L53:C3] E007: Missing "use strict" statement.
  function handleFileSelect(e) {
[L100:C3] E007: Missing "use strict" statement.
  $('#js-create-diagram').click(function(e) {

Warning: Task "jshint:src" failed. Use --force to continue.

when I use grunt-auto it just opens a browser and keeps waiting

Running "browserify:watch" (browserify) task
>> Bundle dist/index.js created.

Running "connect:livereload" (connect) task
Started connect web server on http://localhost:9013

Running "watch" task
Waiting...

So I guess I am not able to package is an web application.

Any clue, thanks a lot for your time and help, really appreciate it.

Regards
Ani

8

I corrected a minor bug that caused the grunt build to fail yesterday. Please update your local working copy of the example repository and try again.

9

Hi
Thanks a lot, for fixing the bug.
Grunt works as expected, appreciate tour help.
It looks like I can have the standalone modeler working.

Thanks

10

Hi
I am integrating properties panel in bpmn modeler but I am facing issue of Uncaught ReferenceError: require is not defined, for this which js is required please give me solution of this error.

11

Please do not necrobump old threads. Instead, open a new linked topic with a clear description of your setup and the steps you undertook to hit this error.

12