React中扩展bpmn-js属性面板遇TypeError：对象不可扩展

错误原因 #

React项目的打包工具（如Webpack、Vite）默认会对导入的静态JSON文件执行Object.freeze()，冻结对象以防止意外修改。而bpmn-js在处理moddleExtensions时需要动态修改该对象，因此触发"Cannot add property __, object is not extensible"错误。原生JS项目没有这个冻结处理，所以官方示例可以正常运行。

解决方案 #

方案1：将JSON文件转换为JS模块导出对象 #

把magic.json重命名为magic.js，直接导出可扩展的对象：

// src/companentPnel/magic.js
export default {
  "name": "magic",
  "uri": "http://magic.io/bpmn/magic/1.0",
  "prefix": "magic",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    // 原JSON中的types内容
  ]
};

然后在组件中导入：

import magicModdleDescriptor from './companentPnel/magic';

这样导入的是普通JS对象，不会被打包工具冻结，bpmn-js可以正常修改。

方案2：深拷贝导入的JSON对象 #

如果不想修改文件类型，可以在使用时对JSON对象进行深拷贝，生成一个新的可扩展对象：

useEffect(() => {
    modelerRef.current = new BpmnModeler({
        container: canvasRef.current,
        propertiesPanel: { parent: propertiesRef.current },
        additionalModules: [
            BpmnPropertiesPanelModule,
            BpmnPropertiesProviderModule,
            magicPropertiesProviderModule
        ],
        moddleExtensions: {
            // 深拷贝避免原冻结对象被修改
            magic: JSON.parse(JSON.stringify(magicModdleDescriptor))
        }
    });
    modelerRef.current.createDiagram();
    return () => {
        modelerRef.current.destroy();
    };
}, []);

额外检查 #

确保magicPropertiesProviderModule中的代码没有直接修改其他被冻结的静态对象，所有需要动态修改的配置都使用可扩展的对象实例。

内容的提问来源于stack exchange，提问作者MrBo