问题背景

在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-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/…包下：

所以我们只需要按照上图修改improt语句和对象名称即可。

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