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

解决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路径已不存在,所以肯定会报错。
解决bpmn-js-properties-panel/lib/...文件不存在问题_第1张图片

解决办法

两个办法,一个是回退至旧版本的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/lib/...文件不存在问题_第2张图片
所以我们只需要按照上图修改improt语句和对象名称即可。

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

你可能感兴趣的:(前端技术,javascript,vue.js,yarn)