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

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]

Sorry for closing your issue. I reopened it after I was able to confirm that this is actually an issue with CommonJS and default imports: https://github.com/bpmn-io/bpmn-js-in-color/issues/3

1 Like

thanks for quick reply :slight_smile:

As I mentioned if you want to color elements in bpmn-js, Modeling#setColor should be your first choice.

1 Like