BPMN Modeler,React and Webpack 3.10.0


Hi there

I’m trying to integrate the modeler with React and Webpack . When I try to import the Modeler like this:

import Modeler from ‘bpmn-js/lib/Moderler’

I get the following exception:

Error: package with prefix <undefined> already defined

at ensureAvailable (registry.js?227c:201) at Registry.registerPackage (registry.js?227c:43) at eval (bindCallback.js?f2ef:25) at eval (createBaseFor.js?d33e:19) at baseForOwn (baseForOwn.js?8f9f:14) at eval (createBaseEach.js?93f3:17) at eval (createForEach.js?2770:16) at new Registry (registry.js?227c:21) at BpmnModdle.Moddle (moddle.js?1e65:43) at new BpmnModdle (bpmn-moddle.js?8f26:21)

But if I import using the following:
import Modeler from 'bpmn-js/dist/bpmn-modeler.production.min';
It works. Has anyone else experienced this problem?



What exactly is the code snippet you bootstrap BpmnJS with?



The below is my Webpack configuration:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const sourcePath = path.join(__dirname, './app');
const buildDirectory = path.join(__dirname, './dist');

const config = {
    devtool: 'eval',
    entry: {
        app: [
    resolve: {
        extensions: ['.js', '.jsx'],
        modules: ['node_modules', sourcePath],
    output: {
        path: buildDirectory,
        filename: 'bundle.js',
        publicPath: '/',
    plugins: [
        new webpack.NamedModulesPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            favicon: './public/favicon.ico'
        new ExtractTextPlugin('styles.css'),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
    module: {
        rules: [
                test: /\.(js|jsx)$/,
                loaders: ['babel-loader'],
                exclude: /node_modules/,
                include: path.join(__dirname, 'app'),
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
                test: /\.bpmn$/,
                loader: 'file-loader?name=diagrams/[name].[ext]'
                test: /\.(png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=100000&name=img/[name].[ext]',
                test: /\.(eot|com|json|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]',
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml&name=img/[name].[ext]',
                test: /\.json$/,
                loader: 'json-loader'


module.exports = config;

My React component has the following constructor:

        this.bpmnModeler = new Modeler();

I then attach the appropriate DOM element to the modeler in componentWillMount().

Not sure if this is enough info?

Thank you for your help.


Note that you have a typo in your first non-working import statement, although the error seems like some other problem. My working import in React is:

import BpmnModeler from ‘bpmn-js/lib/Modeler’

so, with the typo corrected, your first version should work.