vue2.x 项目中 bpmn-js-properties-panel 新版引入报错？

Question

安照 npm 官方给的方法引入的：
https://www.npmjs.com/package/bpmn-js-properties-panel

版本号是

"bpmn-js": "^13.2.2",
"bpmn-js-properties-panel": "^3.0.0",

import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from 'bpmn-js-properties-panel';

const modeler = new BpmnModeler({
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties'
  },
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule
  ]
});

先是报错找不到 @bpmn-io/properties-panel

于是手动安装了

yarn add @bpmn-io/properties-panel -S

"bpmn-js": "^13.2.2",
"bpmn-js-properties-panel": "^3.0.0",
"@bpmn-io/properties-panel": "^3.2.0",

然后再次运行，又报错以下消息

ERROR  Failed to compile with 3 errors                                                                                                                                                                            14:17:31

 error  in ./node_modules/@bpmn-io/feel-lint/node_modules/lezer-feel/dist/index.es.js

Module parse failed: Unexpected token (509:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|   get path() {
>     return this.parent?.path?.concat(' > ', this.name) || this.name;
|   }
| 

 @ ./node_modules/@bpmn-io/feel-lint/dist/index.esm.js 1:0-36 71:21-27
 @ ./node_modules/feelers/dist/index.es.js
 @ ./node_modules/@bpmn-io/properties-panel/dist/index.esm.js
 @ ./node_modules/bpmn-js-properties-panel/dist/index.esm.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/Demo/index.vue?vue&type=script&lang=js&
 @ ./src/Demo/index.vue?vue&type=script&lang=js&
 @ ./src/Demo/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.16.101.26:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/feelers/node_modules/lezer-feel/dist/index.es.js

Module parse failed: Unexpected token (513:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|   get path() {
>     return this.parent?.path?.concat(' > ', this.name) || this.name;
|   }
| 

 @ ./node_modules/feelers/dist/index.es.js 11:0-48 331:25-33
 @ ./node_modules/@bpmn-io/properties-panel/dist/index.esm.js
 @ ./node_modules/bpmn-js-properties-panel/dist/index.esm.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/Demo/index.vue?vue&type=script&lang=js&
 @ ./src/Demo/index.vue?vue&type=script&lang=js&
 @ ./src/Demo/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.16.101.26:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/lezer-feel/dist/index.es.js

Module parse failed: Unexpected token (632:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|   get path() {
>     return this.parent?.path?.concat(' > ', this.name) || this.name;
|   }
| 

 @ ./node_modules/lang-feel/dist/index.js 1:0-52 39:25-31 99:24-38
 @ ./node_modules/@bpmn-io/feel-editor/dist/index.es.js
 @ ./node_modules/@bpmn-io/properties-panel/dist/index.esm.js
 @ ./node_modules/bpmn-js-properties-panel/dist/index.esm.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/Demo/index.vue?vue&type=script&lang=js&
 @ ./src/Demo/index.vue?vue&type=script&lang=js&
 @ ./src/Demo/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.16.101.26:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

应该如何解决呢？

Answer 1

自己已解决

除了 babel-polyfill 外，主要是标红线那里需要注意

Answer 2

由于使用可选链操作?.,导致编译报错

首先安装

npm install @babel/plugin-proposal-optional-chaining -S

babel.config.js中添加

module.exports = {
    ......
   plugins: ["@babel/plugin-proposal-optional-chaining"]
}