Bpmn-js property panel

Developers Modeler
1

Hi,

I’m trying to use camunda 8 connectors and all other camunda 8 modeler features to my angular web application.
Below is the code that I’m trying.

"bpmn-js": "^13.1.0",
"bpmn-js-properties-panel": "^1.9.0",
"zeebe-bpmn-moddle": "^0.19.0",
"@bpmn-io/properties-panel": "^1.0.0",

import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule
} from 'bpmn-js-properties-panel';
import ZeebeBpmnModdle from 'zeebe-bpmn-moddle/resources/zeebe.json'

this.bpmnJS = new BpmnJS({
      propertiesPanel: {
        parent: '#properties'
      },
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule
      ],
      elementTemplates: taskTemplate,
      moddleExtensions: {
        zeebe: ZeebeBpmnModdle
      }
    });

When I run the application I get below error.

ERROR in ./node_modules/lezer-feel/dist/index.es.js 509:23
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 Concepts | webpack
|
| get path() {
return this.parent?.path?.concat(’ > ‘, this.name) || this.name;
| }
|
ERROR in ./node_modules/feelers/node_modules/lezer-feel/dist/index.es.js 513:23
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 Concepts | webpack
|
| get path() {
return this.parent?.path?.concat(’ > ‘, this.name) || this.name;
| }
|
ERROR in ./node_modules/feelin/node_modules/lezer-feel/dist/index.es.js 513:23
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 Concepts | webpack
|
| get path() {
return this.parent?.path?.concat(’ > ', this.name) || this.name;
| }
|

Does anyone is familiar with this error?

Thank you

2

Hi,

looks like the webpack configuration you are using is not supporting optional chaining which is used by one of the downstream dependencies.
Webpack 5 should already support it out of the box, according to this Github discusison. You can also find workarounds for webpack 4 there.