I am trying to add the BPMN modeler to my Next.js project, but I am encountering the following error:

Error: failed to parse document as <bpmn:Definitions>

This error suggests that the provided XML is not valid. However, I downloaded this XML directly from bpmn.io, so I am unsure what is causing the issue.

Here is the component I created for the BPMN modeler in my Next.js project:

"use client";
import { useEffect, useRef, useState } from "react";
import BpmnModeler from "bpmn-js/lib/Modeler";
import Button from '@mui/material/Button';

// ✅ XML string downloaded from bpmn.io
const EMPTY_BPMN_XML = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns=";
                  xmlns:bpmn=";
                  xmlns:bpmndi=";
                  xmlns:dc=";
                  targetNamespace=";>
  <bpmn:process id="Process_1" isExecutable="false"></bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"></bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>`;

const BPMNModeler = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const modelerRef = useRef<BpmnModeler | null>(null);
  const [xml, setXml] = useState("");

  useEffect(() => {
    if (!containerRef.current) return;

    modelerRef.current = new BpmnModeler({
      container: containerRef.current,
    });

    (async () => {
      try {
        await modelerRef.current?.importXML(EMPTY_BPMN_XML);
        console.log("Blank BPMN Modeler Initialized!");
      } catch (err) {
        console.error("Error loading BPMN XML:", err);
      }
    })();

    return () => {
      modelerRef.current?.destroy();
    };
  }, []);

  const exportDiagram = async () => {
    try {
      const { xml } = await modelerRef.current!.saveXML({ format: true });
      setXml(xml);
      console.log("Exported BPMN XML:", xml);
    } catch (err) {
      console.error("Failed to export BPMN XML:", err);
    }
  };

  return (
    <div className="p-4">
      <h1 className="text-xl font-semibold mb-2">BPMN Modeler</h1>
      <div ref={containerRef} className="h-[500px] border border-gray-300 rounded-md" />
      <div className="mt-4">
        <Button onClick={exportDiagram}>Export BPMN</Button>
      </div>
      {xml && (
        <textarea
          className="mt-4 w-full h-40 p-2 border border-gray-300 rounded-md"
          value={xml}
          readOnly
        />
      )}
    </div>
  );
};

export default BPMNModeler;

I suspect the issue is related to XML parsing, but I’m not sure why it's failing, especially since this XML was obtained directly from bpmn.io.

Has anyone encountered a similar issue? Any insights or fixes would be greatly appreciated!