解决bpmn-js-properties-panel/lib/...文件不存在问题

文章介绍了在Vue项目中集成bpmn-js-properties-panel插件时遇到的导入错误,问题在于最新版本的包中相关模块路径改变。提供了两种解决方案:一是回退到旧版本,二是使用新版本并更新导入语句。作者提供了相应的Yarn命令示例和官方仓库链接以帮助开发者解决问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

解决bpmn-js-properties-panel/lib/...文件不存在问题

问题背景

在Vue中集成bpmn-js-properties-panel面板插件时,我们需要导入一些依赖,以便在生成BpmnModeler对象时使用。
如下方的additionalModules中的参数。

methods: {
        async init() {
            this.canvas = this.$refs.canvas;
            this.bpmnModeler = new BpmnModeler({
               container: this.canvas,
               propertiesPanel: {
                  parent: "#js-properties-panel"
               },
               additionalModules: [BpmnPropertiesPanelModule, BpmnPropertiesProviderModule],
               moddleExtensions: {
                  camunda: camundaModdleDescriptor
               }
            });
            await this.createNewDiagram(this.bpmnTemplate);
        },
}

对于上述代码中的两个参数:BpmnPropertiesPanelModule, BpmnPropertiesProviderModule,某些教程可能推荐我们按如下方式导入:

import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda"; 
import propertiesPanelModule from "bpmn-js-properties-panel";

如果这样导入的话会提示找不到该对象,因为在使用yarn引入bpmn-js-properties-pane时我们使用的命令会默认安装最新的包,而在最新的bpmn-js-properties-panel包中,相关的lib/provider/camunda路径已不存在,所以肯定会报错。
通过查看项目中的node_modules文件夹,可知包路径

解决办法

两个办法,一个是回退至旧版本的bpmn-js-properties-pane,一个是坚持使用新版本,但是需要看一下问题出在哪。

方式一:回退至旧版本

思路:在项目下使用命令行可以查看该包的信息,在确认自己是安装了新版本后可以手动卸载该包,并安装指定版本的包。

// 命令仅供参考,不保证执行正确性
// 查看包信息
yarn info bpmn-js-properties-panel
//卸载包
yarn uninstall bpmn-js-properties-panel
//安装指定版本的包
yarn add bpmn-js-properties-panel@0.37.2

参考文章 https://blog.csdn.net/lbd_123/article/details/127084252

方式二:使用正确的导入方式

通过查阅bpmn-js-properties-panel官方仓库可知additionalModules的两个对象已经不在原来的/lib/…包下:
bpmn-js-properties-panel官方给出的初始化案例
所以我们只需要按照上图修改improt语句和对象名称即可。

bpmn-js-properties-panel官方github主页:https://github.com/bpmn-io/bpmn-js-properties-panel

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值