javascript - 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.jsModule 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.jsModule 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.jsModule 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

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

首先安装

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

babel.config.js中添加

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