BPMN Modeler,React and Webpack 3.10.0


#1

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?

Thanks


#2

What exactly is the code snippet you bootstrap BpmnJS with?


#3

Hi

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: [
            'react-hot-loader/patch',
            'webpack-dev-server/client?http://localhost:8001',
            'webpack/hot/only-dev-server',
            './app/index'
        ],
    },
    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:

constructor(){
        super();
        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.


#4

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.