Bpmn.io custom panel properties doesn't show the field

Question

I have tried to use the Bpmn.io modeler plus panel properties in Vue3 and I followed exactly what they have described in this example in Bpmn.io official examples. But it seems doesn't work properly in Vue (I guess Vuejs is the reason), and I don't know why. I can see the custom group but inside it is completely empty.

These are my codes:

main.js

import { createApp } from 'vue'
import App from './App.vue'

import '../node_modules/bpmn-js/dist/assets/bpmn-js.css'
import '../node_modules/bpmn-js/dist/assets/diagram-js.css'
import '../node_modules/bpmn-js/dist/assets/diagram-js.css'
import '../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import '../node_modules/bpmn-js-properties-panel/dist/assets/properties-panel.css'

createApp(App).mount('#app')

App.vue

<template>
  <div>
    <div id="js-canvas"></div>
    <div id="js-properties-panel"></div>
  </div>
</template>

<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from "bpmn-js-properties-panel";
import magicPropertiesProviderModule from "./provider/magic/";
import magicModdleDescriptor from "./descriptors/magic";

export default {
  mounted() {
    const diagram = `
    <?xml version="1.0" encoding="UTF-8"?>
    <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">
      <bpmn2:process id="Process_1" isExecutable="false">
        <bpmn2:startEvent id="StartEvent_1"/>
      </bpmn2:process>
      <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
          <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
            <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>
          </bpmndi:BPMNShape>
        </bpmndi:BPMNPlane>
      </bpmndi:BPMNDiagram>
    </bpmn2:definitions>
    `;
    const bpmnModeler = new BpmnModeler({
      container: "#js-canvas",
      propertiesPanel: {
        parent: "#js-properties-panel",
      },
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        magicPropertiesProviderModule,
      ],
      moddleExtensions: {
        magic: magicModdleDescriptor,
      },
    });

    bpmnModeler.importXML(diagram);
  },
};
</script>

Answer 1

I solved my problem I found out that I need to configure your compiler to recognize JSX properly.

That's the solution:

1- Adding "@babel/plugin-transform-react-jsx": "^7.18.6" as a devDependency in package.json

2- Adding plugins config to the babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        throwIfNamespace: false,
        runtime: 'automatic', 
        importSource: '@bpmn-io/properties-panel/preact',
      }
    ]
  ]
}