Error after building react app with projectstorm as dependency

Hey I have made a react component in which I am using projectstorm. I made npm package for this component so that I can re-use it in different react web-apps according to my requirement. When I import this npm package in a React app and run it, everything works fine but when I build it i.e. (react-scripts build) and then verify it by running server in build folder I got this error.

react-dom.production.min.js:209 TypeError: Cannot convert undefined or null to object at getPrototypeOf () at n (getPrototypeOf.js:5) at n.value (index.js:92) at n.value (index.js:9) at e.default (index.js:9) at u.value (index.js:118) at Da (react-dom.production.min.js:182) at ja (react-dom.production.min.js:181) at yi (react-dom.production.min.js:263) at cu (react-dom.production.min.js:246)

When I look into index.js:118 I found that problem is in following line

const engine = createEngine();

So I believe there is some bug in projectstorm library or I have not bundled the component correctly using webpack to make npm package. Here is code for the component in which I am using this library. Also I have added codes for other related files to bundle it as npm package.

DemoReactComponent.js

`import React from 'react'; import createEngine, { DefaultLinkModel, DefaultNodeModel, DiagramModel } from '@projectstorm/react-diagrams';

import { CanvasWidget } from '@projectstorm/react-canvas-core';

class StormDiagrams extends React.Component {

render () {

    const engine = createEngine();
    const node1 = new DefaultNodeModel({
        name: 'Start',
        color: 'red',
    });
    node1.setPosition(100, 100);
    let port1out1 = node1.addOutPort('Start');

    const node2 = new DefaultNodeModel({
        name: 'Node 1',
        color: 'rgb(0,192,255)',
    });
    node2.setPosition(200, 100);
    let port2 = node2.addInPort('On Trigger');

    const link1 = port1out1.link(port2);
    link1.addLabel('Hello World!');

    const model = new DiagramModel();
    model.addAll(node1, node2, link1);
    engine.setModel(model);

    return (
        <div>
            <CanvasWidget engine={engine} className="canvas"/>
        </div>
    )    
}

}

export default StormDiagrams;`

index.js

import Demo from './Demo/Demo.js'; export default Demo;

webpack.config.js

`const path = require("path"); const autoprefixer = require('autoprefixer');

module.exports = { mode: "production", entry: "./src/index.js", output: { path: path.resolve("build"), filename: "index.js", libraryTarget: "umd", library: "plowchart" }, module: { rules: [ { test: /.(ts|tsx)$/, include: [/\/node_modules\/@projectstorm/], loader: 'ts-loader', //exclude: /node_modules/ }, { test: /.(js|ts|tsx)$/, include: [path.join(__dirname, 'src'), /\/node_modules\/@projectstorm/], loader: 'babel-loader', //exclude: /node_modules/ }, { test: /.css$/, exclude: /node_modules/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { importLoaders: 1, modules: true, localIdentName: '[name][local][hash:base64:5]' } }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ autoprefixer({ browsers: [ "> 1%", "last 2 versions" ] }) ] } } ] }, { test: /.(png|jpe?g|gif)$/, loader: 'url-loader?limit=8000&name=images/[name].[ext]' } ] }, externals: { react: {
commonjs: "react",
commonjs2: "react",
amd: "React",
root: "React"
},
"react-dom": {
commonjs: "react-dom",
commonjs2: "react-dom",
amd: "ReactDOM",
root: "ReactDOM"
} } };`

I think there is no need of ts-loader and also packaging 'node_modules/projectstorm' but I have added this after going through issue #514, #440, #521.

.babelrc

{ "presets": ["@babel/preset-react", "@babel/preset-env"], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from" ] }

package.json

{ "name": "plowchart", "version": "1.0.7", "description": "reusable component", "main": "build/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "ishan", "license": "", "devDependencies": { "@babel/core": "^7.7.5", "@babel/plugin-proposal-export-default-from": "^7.10.4", "@babel/preset-env": "^7.7.6", "@babel/preset-react": "^7.7.4", "babel-preset-stage-2": "^6.24.1", "babel-loader": "^8.0.6", "css-loader": "^0.28.7", "style-loader": "^0.19.0", "file-loader": "^1.1.5", "postcss-loader": "^2.0.7", "url-loader": "^0.6.2", "webpack": "^4.41.2", "webpack-cli": "^3.3.10", "webpack-dev-server": "^2.9.1", "autoprefixer": "^7.1.5", "react": "^16.13.1", "react-dom": "^16.13.1", "antd": "^4.6.2", "@emotion/core": "^10.", "@emotion/styled": "^10.", "@projectstorm/react-diagrams": "^6.2.0", "closest": "^0.0.1", "lodash": "4.", "resize-observer-polyfill": "^1.5.1", "dagre": "^0.8.4", "pathfinding": "^0.4.18", "paths-js": "^0.4.9", "ml-matrix": "^6.5.0", "ts-loader": "^7.0.5", "typescript": "^3.9.3", "source-map-loader": "^1.0.0" }, "dependencies": { "@projectstorm/react-diagrams": "^6.2.0", "antd": "^4.6.2", "closest": "^0.0.1", "lodash": "4.", "resize-observer-polyfill": "^1.5.1", "@emotion/styled": "^10.", "@emotion/core": "^10.", "dagre": "^0.8.4", "pathfinding": "^0.4.18", "paths-js": "^0.4.9", "ml-matrix": "^6.5.0" } }

projectstorm / react-diagrams