Element Templates Type error

[Freddy]

When I click on an element template, I get the error message shown in the picture. I am working on a React project. Do you possibly have a solution for this?

My React Component looks like this

import { useRouter } from "next/router";
import React, { useEffect, useRef } from "react";
import { BPMN_XML } from "@/components/common/bpmn-js/template/bpmnXml";
import { Box } from "@mui/material";
import AddExporterModule from "@bpmn-io/add-exporter";
import TemplateIconRendererModule from "@bpmn-io/element-templates-icons-renderer";
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  CamundaPlatformPropertiesProviderModule,
} from "bpmn-js-properties-panel";
import BpmnModeler from "bpmn-js/lib/Modeler";
import camundaPlatformBehaviors from "camunda-bpmn-js-behaviors/lib/camunda-platform";
import CamundaModdle from "camunda-bpmn-moddle/resources/camunda";
import translationsDe from "../translation/de.json";
import translationsEn from "../translation/en.json";
import "bpmn-js-connectors-extension/dist/connectors-extension.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import "bpmn-js/dist/assets/bpmn-js.css";
import "bpmn-js/dist/assets/diagram-js.css";
import {
  CreateAppendAnythingModule,
  CreateAppendElementTemplatesModule,
} from "bpmn-js-create-append-anything";
import { ElementTemplatesPropertiesProviderModule } from "bpmn-js-element-templates";

const BpmnIoModeler = (props) => {
  const [elementTemplates, setElementTemplates] = React.useState([]);
  const router = useRouter();
  const propertiesPanelRef = useRef(null);
  const containerRef = useRef(null);
  const modeler = useRef();

  useEffect(() => {
    if (
      JSON.stringify(elementTemplates) !==
      JSON.stringify(props.elementTemplates)
    ) {
      setElementTemplates(props.elementTemplates);
    }
  }, [elementTemplates, props.elementTemplates]);

  useEffect(() => {
    const customTranslate = (template, replacements) => {
      replacements = replacements || {};
      template =
        getLanguageCode() === "de"
          ? translationsDe[template] || template
          : translationsEn[template] || template;
      return template.replace(/{([^}]+)}/g, function (_, key) {
        return replacements[key] || "{" + key + "}";
      });
    };

    const getLanguageCode = () => {
      return router.locale;
    };

    const customTranslateModule = {
      translate: ["value", customTranslate],
    };

    modeler.current = new BpmnModeler({
      container: containerRef.current,
      keyboard: {
        bindTo: document,
      },
      propertiesPanel: {
        parent: propertiesPanelRef.current,
      },
      additionalModules: [
        customTranslateModule,
        AddExporterModule,
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        CamundaPlatformPropertiesProviderModule,
        TemplateIconRendererModule,
        camundaPlatformBehaviors,
        CreateAppendAnythingModule,
        CreateAppendElementTemplatesModule,
        ElementTemplatesPropertiesProviderModule,
      ],
      elementTemplates,
      moddleExtensions: {
        camunda: CamundaModdle,
      },
      exporter: {
        name: "modeling-demo",
        version: "0.0.0",
      },
    });

    modeler.current.on("elementTemplates.errors", (event) => {
      const { errors } = event;
      console.log("[ELEMENT_TEMPLATE_ERROR]-", errors);
    });

    openBpmnInModeler(BPMN_XML).catch((errors) => {
      console.log("[BPMN_FILE_OPEN_ERROR]-", errors);
    });

    return () => {
      modeler.current.destroy();
    };
  }, [elementTemplates, router.locale]);
  const openBpmnInModeler = async (bpmnFile) => {
    await modeler.current
      .importXML(bpmnFile)
      .then((result) => {
        const { warnings } = result;
        console.log("[BPMN_FILE_OPEN_WARNINGS]-", warnings);
        const canvas = modeler.get("canvas");
        canvas.zoom("fit-viewport");
      })
      .catch((err) => {
        console.log("[OPEN_BPMN_FILE_ERROR]-", err.message, err.warnings);
      });
  };
  return (
    <Box
      sx={{
        display: "flex",
        maxHeight: "inherit",
        height: "inherit",
      }}
    >
      <Box
        ref={containerRef}
        sx={{
          width: "75%",
          maxHeight: "inherit",
          height: "inherit",
        }}
      />
      <Box
        ref={propertiesPanelRef}
        sx={{
          width: "25%",
          maxHeight: "inherit",
          height: "inherit",
        }}
      />
    </Box>
  );
};
export default BpmnIoModeler;

[nikku]

ElementTemplates#createElement is not supported for Camunda 7 (“camunda platform”) diagrams. Hence CreateAppendElementTemplatesModule is not compatible with Camunda 7 diagrams.

We’d want to add a helpful warning to the documentation.

[Freddy]

What can I use instead?

[nikku]

You can use the existing facilities (change element type via properties panel + element template chooser) instead:

[Freddy]

With the element template chooser i got this error “Error: No provider for “elementTemplates”! (Resolving: elementTemplateChooser → elementTemplates)”.

    modeler.current = new BpmnModeler({
      container: containerRef.current,
      additionalModules: [
        customTranslateModule,
        AddExporterModule,
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        CamundaPlatformPropertiesProviderModule,
        camundaPlatformBehaviors,
        ElementTemplateChooserModule,
      ],
      exporter: {
        name: "modeling-demo",
        version: "0.0.0",
      },
      keyboard: {
        bindTo: document,
      },
      propertiesPanel: {
        parent: propertiesPanelRef.current,
      },
      moddleExtensions: {
        camunda: CamundaModdle,
      },
    });

    modeler.current.on("elementTemplates.errors", (event) => {
      const { errors } = event;
      console.log("[ELEMENT_TEMPLATE_ERROR]-", errors);
    });

    modeler.current
      .get("elementTemplatesLoader")
      .setTemplates(props.elementTemplates);

[philippfromme]

You’ll have to include GitHub - bpmn-io/bpmn-js-element-templates: The element template extension for bpmn-js as well.