BPMN Modeler,React and Webpack 3.10.0

Developers Modeler
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.

5

this solution is what working can you please help me in this .
Here is my webpack.config

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
entry: [’./index.js’],
node: {
fs: ‘empty’,
net: ‘empty’,
tls: ‘empty’
},
output: {
path: __dirname + ‘/public’,
filename: ‘bundle.js’
},
devServer: {
inline: true,
port: 8081,
watchContentBase: true,
headers: {
“Access-Control-Allow-Origin”: “*”,
“Access-Control-Allow-Methods”: “GET, POST, PUT, DELETE, PATCH, OPTIONS”
}
},
module: {
loaders: [{
test: /.jsx?$/,
exclude: /node_modules/,
loader: ‘babel-loader’,
query: {
presets: [‘react’, ‘es2015’, ‘stage-1’]
}
},
{
test: /.css$/,
loader: “style-loader!css-loader”
},
{
test: /.bpmn$/,
exclude: /node_modules/,
query: {
presets: [‘react’, ‘es2015’, ‘stage-1’]
},
loader: ‘file-loader?name=diagrams/[name].[ext]’
},
{
test: /.scss$/,
loader: “scss-loader!style-loader!css-loader”
},
{
test: /.png$/,
loader: “url-loader?limit=100000”
},
{
test: /.jpg$/,
loader: “file-loader”
}, {
test: /.(woff|woff2)(?v=\d+.\d+.\d+)?$/,
loader: ‘url?limit=10000&mimetype=application/font-woff’
},
{
test: /.ttf(?v=\d+.\d+.\d+)?$/,
loader: ‘url?limit=10000&mimetype=application/octet-stream’
},
{
test: /.eot(?v=\d+.\d+.\d+)?$/,
loader: ‘file’
},
{
test: /.svg$/,
exclude: /node_modules/,
loader: ‘svg-react-loader’,
}

]

},
plugins: [
new HtmlWebpackPlugin({
hash: true,
template: ‘index.html’,
filename: ‘index.html’ //relative to root of the application
})
]
};

6

Please do not necrobump old topics. Instead link to this thread from new topic.

7