I created new reactJs project to apply BPMN.IO
I have this package.json file
"dependencies": {
"bpmn-font": "^0.10.0",
"bpmn-js": "^7.4.0",
"bpmn-js-in-color": "github:bpmn-io/bpmn-js-in-color",
"diagram-js-minimap": "^2.0.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"tiny-svg": "^2.2.2",
"web-vitals": "^0.2.4"
}
In my App.js
import React, { Fragment, Component } from "react";
import BpmnModeler from "bpmn-js/lib/Modeler";
import { emptyBpmn } from "./diagram.bpmn.jsx";
import bpmnJsInColor from "bpmn-js-in-color";
import minimapModule from "diagram-js-minimap";
import "./vendor/diagram-js.css";
import "bpmn-font/dist/css/bpmn-embedded.css";
import "diagram-js-minimap/assets/diagram-js-minimap.css";
class App extends Component {
modeler = null;
saveModelHandler = (event) => {
event.preventDefault();
};
componentDidMount = () => {
this.modeler = new BpmnModeler({
container: "#bpmnview",
additionalModules: [require("bpmn-js-in-color")],
keyboard: { bindTo: document },
});
this.newBpmnDiagram();
};
newBpmnDiagram = () => {
this.openBpmnDiagram(emptyBpmn);
};
openBpmnDiagram = async (xml) => {
await this.modeler.importXML(xml);
var canvas = this.modeler.get("canvas");
canvas.zoom("fit-viewport");
};
render = () => {
return (
<Fragment>
<div
id="bpmnview"
style={{ width: "100%", height: "100vh", float: "left" }}
></div>
</Fragment>
);
};
}
export default App;
When I enter npm start
. It throws error
**TypeError: Object prototype may only be an Object or null: undefined**
inherits
**node_modules/inherits/inherits_browser.js:6**
3 | module.exports = function inherits(ctor, superCtor) {
4 | if (superCtor) {
5 | ctor.super_ = superCtor
> 6 | ctor.prototype = Object.create(superCtor.prototype, {
| ^ 7 | constructor: {
8 | value: ctor,
9 | enumerable: false,
Environment
- Host (Browser/Node version),[Macbook pro, Chrome 69, Node v14.4.0 LTS]