UMD Bundle Broken

[gttom]

I found during testing that it works properly when used in the node.js environment. But it won’t work properly when introduced using UMD in a browser environment. The introduction method is as follows:

<script src="lib/bpmn-js-element-templates/dist/bpmn-js-element-templates.umd.js"></script>`

let {
  CloudElementTemplatesPropertiesProviderModule
} = BpmnJSElementTemplates;
const modeler = new BpmnJS({
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties',
  },
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    CloudElementTemplatesPropertiesProviderModule,
  ],
  elementTemplates: [
    {
      "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
      "name": "REST Connector (No Auth)",
      "id": "io.camunda.connectors.HttpJson.v1.noAuth",
      "description": "Invoke REST API and retrieve the result",
      "icon": {
        "contents": "data:image/svg+xml;utf8,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.0335%208.99997C17.0335%2013.4475%2013.4281%2017.0529%208.98065%2017.0529C4.53316%2017.0529%200.927765%2013.4475%200.927765%208.99997C0.927765%204.55248%204.53316%200.947083%208.98065%200.947083C13.4281%200.947083%2017.0335%204.55248%2017.0335%208.99997Z%22%20fill%3D%22%23505562%22%2F%3E%0A%3Cpath%20d%3D%22M4.93126%2014.1571L6.78106%203.71471H10.1375C11.1917%203.71471%2011.9824%203.98323%2012.5095%204.52027C13.0465%205.04736%2013.315%205.73358%2013.315%206.57892C13.315%207.44414%2013.0714%208.15522%2012.5841%208.71215C12.1067%209.25913%2011.4553%209.63705%2010.6298%209.8459L12.0619%2014.1571H10.3315L9.03364%2010.0249H7.24351L6.51254%2014.1571H4.93126ZM7.49711%208.59281H9.24248C9.99832%208.59281%2010.5901%208.42374%2011.0177%208.08561C11.4553%207.73753%2011.6741%207.26513%2011.6741%206.66842C11.6741%206.19106%2011.5249%205.81811%2011.2265%205.54959C10.9282%205.27113%2010.4558%205.1319%209.80936%205.1319H8.10874L7.49711%208.59281Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E%0A"
      },
      "documentationRef": "https://docs.camunda.io/docs/components/modeler/web-modeler/connectors/available-connectors/rest/",
      "appliesTo": [
        "bpmn:ServiceTask"
      ],
      "elementType": {
        "value": "bpmn:ServiceTask"
      },
      "groups": [
        {
          "id": "endpoint",
          "label": "HTTP Endpoint"
        },
        {
          "id": "input",
          "label": "Payload"
        },
        {
          "id": "output",
          "label": "Response Mapping"
        }
      ],
      "properties": [
        {
          "type": "Hidden",
          "value": "io.camunda:http-json:1",
          "binding": {
            "type": "zeebe:taskDefinition:type"
          }
        },
        {
          "label": "Method",
          "group": "endpoint",
          "type": "Dropdown",
          "value": "get",
          "choices": [
            {"name": "GET", "value": "get"},
            {"name": "POST", "value": "post"},
            {"name": "PATCH", "value": "patch"},
            {"name": "PUT", "value": "put"},
            {"name": "DELETE", "value": "delete"}
          ],
          "binding": {
            "type": "zeebe:input",
            "name": "method"
          }
        },
        {
          "label": "URL",
          "group": "endpoint",
          "type": "String",
          "feel": "optional",
          "binding": {
            "type": "zeebe:input",
            "name": "url"
          },
          "constraints": {
            "notEmpty": true,
            "pattern": {
              "value": "^https?://.*",
              "message": "Must be a http(s) URL."
            }
          }
        },
        {
          "label": "Query Parameters",
          "description": "Map of query parameters to add to the request URL",
          "group": "endpoint",
          "type": "Text",
          "feel": "required",
          "binding": {
            "type": "zeebe:input",
            "name": "queryParameters"
          },
          "optional": true
        },
        {
          "label": "HTTP Headers",
          "description": "Map of HTTP headers to add to the request",
          "group": "endpoint",
          "type": "Text",
          "feel": "required",
          "binding": {
            "type": "zeebe:input",
            "name": "headers"
          },
          "optional": true
        },
        {
          "label": "Request Body",
          "description": "JSON payload to send with the request",
          "group": "input",
          "type": "Text",
          "feel": "optional",
          "binding": {
            "type": "zeebe:input",
            "name": "body"
          },
          "optional": true
        },
        {
          "label": "Result Variable",
          "description": "Name of variable to store the response in",
          "group": "output",
          "type": "String",
          "binding": {
            "type": "zeebe:taskHeader",
            "key": "resultVariable"
          }
        },
        {
          "label": "Result Expression",
          "description": "Expression to map the response into process variables",
          "group": "output",
          "type": "Text",
          "feel": "required",
          "binding": {
            "type": "zeebe:taskHeader",
            "key": "resultExpression"
          }
        }
      ]
    },
  ]
});

I want to know the reason for this anomaly?

[philippfromme]

The UMD bundle is broken. Since you cannot use multiple versions of Preact at the same time but the UMD bundle cannot access the Preact version you're using the UMD bundle is effectively broken. To work around this you can bundle yourself and ensure that Preact is deduplicated. We should probably remove the UMD bundle altogether to prevent this issue in the future.