Bundling error: SyntaxError with

Developers
1

I’m getting this error:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0) while parsing [folder]\node_modules\bpmn-js\lib\Modeler.js

when running npm run build with Browserify in Node.js command prompt

here is my package.json:

{
  "name": "bpmnpoc",
  "version": "1.0.0",
  "description": "POC of bpmn js",
  "main": "bpmn-poc.js",
  "scripts": {
    "build": "browserify bpmn-poc.js -o bpmn-poc-bundle.js",
    "watch": "watchify bpmn-poc.js -o bpmn-poc-bundle.js"
  },
  "author": "Bruce",
  "license": "ISC",
  "devDependencies": {
    "browserify": "^16.2.2"
  },
  "dependencies": {
    "bpmn-js": "^2.4.1",
    "watchify": "^3.11.0"
  }
}

This is my first time using above technologies so apologies if I missed something. I searched around and the solution is to somehow make Modeler.js run as ES 5? Would it work then if I convert Modeler.js alone into ES 5 or do I need to use another transpiler like Babel and convert all js scripts in my library to run ES 5? Thanks in advance!

Regards,
Bruce

2

The library exposes ES modules that must be understood by your module bundler. Unfortunately browserify does not support it yet and, thus, can only be used with additional configuration hazzles.

Did you follow our bundling example to learn how to consume our library? We recommend using Webpack for bundling as it is easier to set up and use these days.

Switching should be straight forward:

  • Add the required dependencies to your project.

    npm install webpack webpack-cli --save-dev

  • Replace the scripts in your package.json with the webpack equivalents.

      ...
  "scripts": {
    "build": "webpack ./bpmn-poc.js -o bpmn-poc-bundle.js",
    "watch": "webpack -w ./bpmn-poc.js -o bpmn-poc-bundle.js"
  },
  ...
4

That did it. Thanks!

1 Like