Error bundling bpmn-js: <Unexpected token export>

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 {
	} 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,


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

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

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.

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.

Which version of Webpack do you use?

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"

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

Thanks! That fixed the issue.

1 Like