TypeError while trying to add a custom property to Properties-panel of Bpmn js

360 Views Asked by At

I have been trying to add custom property to Properties-panel as it shown in the example (https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension) bpmn io. But when I try to rewrite it to React JS I get an error: TypeError: Cannot add property __, object is not extensible. Help who solved such a similar problem. It would be very helpful for me. Thanks. Here is my code:

import { useEffect, useRef } from "react";
import BpmnModeler from 'bpmn-js/lib/Modeler';
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'
import 'bpmn-js-properties-panel/dist/assets/element-templates.css'
import {
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule
} from 'bpmn-js-properties-panel';
import magicPropertiesProviderModule from './companentPnel/index';
import magicModdleDescriptor from './companentPnel/magic.json';

export default function Bpmn() {
    const canvasRef = useRef(null);
    const modelerRef = useRef(null);
    const propertiesRef = useRef(null)
    useEffect(() => {
        modelerRef.current = new BpmnModeler({
            container: canvasRef.current,
            propertiesPanel: { parent: propertiesRef.current },
            additionalModules: [
                BpmnPropertiesPanelModule,
                BpmnPropertiesProviderModule,
                magicPropertiesProviderModule
            ],
            moddleExtensions: {
                magic: magicModdleDescriptor
              }
        });
        modelerRef.current.createDiagram();
        return () => {
            modelerRef.current.destroy();
        };
    }, []);
    return (
        <div style={{ display: 'flex', height: '100%' }}>
            <div ref={canvasRef} style={{ flex: 1 }}></div>
            <div ref={propertiesRef} style={{ width: '300px'}}></div>
        </div>
    );
}

At the same time, the GitHub example itself, written in JS and HTML, works fine. But I need to make a React component for my task

0

There are 0 best solutions below