Uncaught TypeError: superCtor.prototype is not an object or null

Developers Modeler
1

I created new project to apply BPMN.IO
**this error when use bpmn-js-color **
Uncaught TypeError: superCtor.prototype is not an object or null
I have this package.json file

{
  "name": "bpmn",
  "version": "1.0.0",
  "description": "bpmn",
  "main": "src/app.js",
  "dependencies": {
    "bpmn-js": "^8.5.0",
    "bpmn-js-embedded-comments": "^0.6.1",
    "bpmn-js-in-color": "^0.2.0",
    "bpmn-js-task-resize": "^1.1.0",
    "bpmn-moddle": "^7.0.5",
    "component-event": "^0.1.4",
    "css.escape": "^1.5.1",
    "diagram-js": "^7.3.0",
    "diagram-js-direct-editing": "^1.6.2",
    "didi": "^5.2.1",
    "domify": "^1.4.1",
    "hammerjs": "^2.0.8",
    "ids": "^1.0.0",
    "indexof": "^0.0.1",
    "inherits": "^2.0.4",
    "matches-selector": "^1.2.0",
    "min-dash": "^3.7.0",
    "min-dom": "^3.1.3",
    "moddle": "^5.0.2",
    "moddle-xml": "^9.0.5",
    "object-refs": "^0.3.0",
    "path-intersection": "^2.2.1",
    "saxen": "^8.1.2",
    "tiny-svg": "^2.2.2"
  },
  "devDependencies": {
    "ts-loader": "^9.1.2",
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0"
  },
  "scripts": {
    "start": "react-scripts --max_old_space_size=4096 start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "webpack": "webpack --profile",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "nowrozian",
  "license": "MIT"
}

In my App.js


import inherits from 'inherits';
import BaseModeling from 'diagram-js/lib/features/modeling/Modeling';
//var fs = require('fs');
import BpmnModeler from 'bpmn-js/lib/Modeler';
//import BpmnModeler from 'bpmn-js/lib/Modeler';
import customTranslate from '../wwwroot/lib/customTranslate/customTranslate';
import BpmnRenderer from 'bpmn-js/lib/draw/index';

import ColorRenderer from 'bpmn-js-in-color/colors/ColorRenderer';
import bpmnjscolor from 'bpmn-js-in-color/colors/index';

var container = $('#js-drop-zone');
var customTranslateModule = {
    translate: ['value', customTranslate]
};
var modeler = new BpmnModeler({
    container: '#canvas',
      bpmnRenderer: {
        defaultFillColor: '#333',
        defaultStrokeColor: '#fff',
       // SketchyRenderer
    },
    textRenderer: {
        defaultStyle: {
            fontFamily: 'iransansweb(fanum)_light',
            fontWeight: 'bold',
            fontSize: 12,
            lineHeight: 16

        },
        externalStyle: {
            fontSize: 12,
            lineHeight: 16
        },
    },
    additionalModules: [
         
        customTranslateModule,
        bpmnjscolor
   ],
});
2

The code snippets you shared are not enough to find out what the issue is.

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart: