Next.js | Failed to parse document

[bnjmn92]

Hi.

I am sorry to open this discussion once more. I am currently facing an issue with the following file structure.

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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" id="Definitions_0n7xuvq" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="18.1.1">
  <bpmn:process id="Process_1w4p6s6" isExecutable="false">
    <bpmn:startEvent id="StartEvent_0zgawuu" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1w4p6s6">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_0zgawuu">
        <dc:Bounds x="156" y="82" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>

I downloaded this file directly from bpmn.io and can work it there. When importing into my application I receive the following error.

Error: failed to parse document as bpmn:Definitions

I am puzzled what I am doing wrong! Any help is highly appreciated. Please find the code of my react module below as well:

'use client';
import { useEffect, useRef } from 'react';
import BpmnModeler from 'bpmn-js/lib/Modeler';
// Import required BPMN.io CSS for styling
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';

// Default BPMN XML template with a simple start event
const newDiagramXML = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:bpmn="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"
  id="sample-diagram"
  targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn:process id="Process_1" isExecutable="false">
    <bpmn:startEvent id="StartEvent_1"/>
  </bpmn: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>
</bpmn:definitions>`;

// Component props interface
interface BpmnModelerProps {
  xml?: string;              // Optional XML string to initialize the diagram
  onChange?: (xml: string) => void;  // Callback when diagram changes
}

export default function BpmnModelerComponent({ xml, onChange }: BpmnModelerProps) {
  // Refs to store DOM container and modeler instance
  const containerRef = useRef<HTMLDivElement>(null);
  const modelerRef = useRef<BpmnModeler | null>(null);

  useEffect(() => {
    // Only initialize if container is available
    if (!containerRef.current) return;

    // Create new BPMN modeler instance
    const modeler = new BpmnModeler({
      container: containerRef.current
    });
    modelerRef.current = modeler;

    // Use provided XML or fallback to default template
    const initialDiagram = xml || newDiagramXML;
    
    async function importDiagram() {
      try {
        console.log('Start importing Diagram');
        console.log('XML Content:', initialDiagram);
        
        // Import the XML into the modeler
        const { warnings } = await modeler.importXML(initialDiagram);
        
        // Log any warnings that occurred during import
        if (warnings.length) {
          console.warn('BPMN import warnings:', warnings);
        }

        // Get the event bus to handle diagram changes
        const eventBus = modeler.get('eventBus');

        // Handler for diagram changes
        const handleChange = async () => {
          try {
            // Export the current diagram as XML
            const { xml } = await modeler.saveXML({ format: true });
            onChange?.(xml);
          } catch (err) {
            console.error('Error saving diagram:', err);
          }
        };

        // Subscribe to diagram changes
        eventBus.on('commandStack.changed', handleChange);
        
        // Cleanup function
        return () => {
          eventBus.off('commandStack.changed', handleChange);
          modeler.destroy();
        };
      } catch (err) {
        console.error('Error importing BPMN diagram:', err);
      }
    }

    importDiagram();
  }, [xml, onChange]); // Re-run effect when xml or onChange changes

  return (
    // Container for the BPMN diagram
    <div className="w-full h-[600px] border border-gray-200 rounded-lg">
      <div ref={containerRef} className="w-full h-full" />
    </div>
  );
}

[jarekdanielak]

Could you share your code as a CodeSandbox, so we can actually run it and see the error?

[bnjmn92]

During copying my code into the sandbox I just realized that I messed up my import structure. Now it is working. Thank you for your answer anyway. Otherwise I might not have found the issue!