Error bundling bpmn-js: <Unexpected token export>

Developers
1

Hi there,

I’m making an app with bpmn-js and reactjs. I was wondering if this is possible. I created a simple react app with a simple message, then I tried to import the bpmn-js library but as soon as I import it I got this error message in the console “Uncaught SyntaxError: Unexpected token export”. When I click on the error, it gets me to this code:

/* 61 */
/***/ (function(module, exports) {

	export {
	  default
	} from './lib/Viewer';

/***/ }),
/* 62 */
/***/

My react code just has this,

import React, { Component } from 'react';
import BpmnViewer from 'bpmn-js';

export default class App extends Component {
  render() {
    return (
      <div>React simple starter</div>
    );
  }
}

If you want to know about my package.json I have included these libraries

"dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "bpmn-js": "^2.4.0",
    "bpmn-js-properties-panel": "^0.26.1",
    "camunda-bpmn-moddle": "^3.0.0",
    "diagram-js": "^2.5.1",
    "lodash": "^3.10.1",
    "react": "16.3.2",
    "react-dom": "16.3.2",
    "react-redux": "5.0.7",
    "redux": "4.0.0"
  }

I can run examples with jquery without issue but I need to use react. Any idea what could be happening?

Thanks in advance,
Angelo

Answer

Ensure you use an ES module aware bundler to consume bpmn-js >= 1.0.

Compatible bundlers include Rollup, Webpack >= 2 and others.

2

Make sure you’re properly consuming the library. How do you bundle your app? As you can see your bundler seems to be unaware of ES module syntax.

3

This is my webpack.config.js file.

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
};

it just fails when I import the library, not sure if I’m missing something.

4

Which version of Webpack do you use?

5

These are my dev dependencies

"devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
6

The library exports ES modules. You must use a ES module aware bundler (Rollup, Webpack >= 2, …) to consume it or include it in your babel transform along with its dependencies.

1 Like
7

Thanks! That fixed the issue.

1 Like