Bpmn-js-in-color error

hryshyn23 · July 15, 2021, 8:42am

Hi there !
When I tried to implement

I got next error:

*core.js:5980 ERROR Error: Uncaught (in promise): TypeError: Object prototype may only be an Object or null: undefined*
*TypeError: Object prototype may only be an Object or null: undefined*
*    at Function.create (<anonymous>)*
*    at inherits (inherits_browser.js:6)*
*    at Object.mncJ (ColorRenderer.js:52)*
*    at __webpack_require__ (bootstrap:84)*
*    at Object.FEu5 (index.js:9)*
*    at __webpack_require__ (bootstrap:84)*
*    at Object.+WxV (index.js:1)*
*    at __webpack_require__ (bootstrap:84)*
*    at Module.qosw (InputOutputParameter.js:494)*
*    at __webpack_require__ (bootstrap:84)*
*    at resolvePromise (zone-evergreen.js:798)*
*    at resolvePromise (zone-evergreen.js:750)*
*    at zone-evergreen.js:860*
*    at ZoneDelegate.invokeTask (zone-evergreen.js:399)*
*    at Object.onInvokeTask (core.js:28289)*
*    at ZoneDelegate.invokeTask (zone-evergreen.js:398)*
*    at Zone.runTask (zone-evergreen.js:167)*
*    at drainMicroTaskQueue (zone-evergreen.js:569)*

Angular 11

nikku · July 15, 2021, 9:50am

The latest version of bpmn-js ships with built in color support so you may want to try out that one.

In order to solve your issue we’d need more information (how you use the library, what did not work).

nikku · July 15, 2021, 9:58am

It looks like your issue has already been reported on the extension itself:

github.com/bpmn-io/bpmn-js-in-color

TypeError: Object prototype may only be an Object or null: undefined

opened 07:21AM - 12 Nov 20 UTC

Imran-Haider313

backlog bug good first issue pr-welcome spring cleaning

__Describe the Bug__ 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] - Library version: [e.g. 2.0.0]