[Question]: importXml时出现TypeError: Cannot read properties of undefined (reading 'root-0')

[Xnwf]

遇到了什么问题？

• react 初始化importXml时会出现这个报错
• edge浏览器中不影响页面的显示
• 在官网导入xml没有发现该报错
• 注释掉importXml则不会报错

export var xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="5.1.2">
<process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1y45yut" name="开始">
    <outgoing>SequenceFlow_0h21x7r</outgoing>
    </startEvent>
    <task id="Task_1hcentk">
    <incoming>SequenceFlow_0h21x7r</incoming>
    </task>
    <sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
</process>
<bpmndi:BPMNDiagram id="BpmnDiagram_1">
    <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
    <bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
        <omgdc:Bounds x="152" y="102" width="36" height="36" />
        <bpmndi:BPMNLabel>
        <omgdc:Bounds x="160" y="145" width="22" height="14" />
        </bpmndi:BPMNLabel>
    </bpmndi:BPMNShape>
    <bpmndi:BPMNShape id="Task_1hcentk_di" bpmnElement="Task_1hcentk">
        <omgdc:Bounds x="240" y="80" width="100" height="80" />
    </bpmndi:BPMNShape>
    <bpmndi:BPMNEdge id="SequenceFlow_0h21x7r_di" bpmnElement="SequenceFlow_0h21x7r">
        <omgdi:waypoint x="188" y="120" />
        <omgdi:waypoint x="240" y="120" />
    </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>`

// bpmn自带样式
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";

import React, { useImperativeHandle, forwardRef, useEffect, useRef } from "react";
import BpmnModeler from "bpmn-js/lib/Modeler";
import { xmlStr } from "./xmlStr";
const BpmnModelerComponent = forwardRef((props, ref) => {
    const bpmnModelerRef = useRef(null);
    const bpmnModeler = useRef(null);
    useEffect(() => {
        // 初始化BpmnModeler
        bpmnModeler.current = new BpmnModeler({
            container: "#flowCanvas",
        });

        async function importXML(xmlStr) {
            const { warnings } = await bpmnModeler.current.importXML(xmlStr);
            console.log("warnings", warnings);
        }
        importXML(xmlStr);
        
        // 清理函数
        return () => {
            bpmnModeler.current.destroy();
        };
    }, []);
    useImperativeHandle(ref, () => ({
        exportXML: () => {
            return bpmnModeler.current
                .saveXML({ format: true })
                .then(({ xml }) => {
                    return xml;
                })
                .catch((err) => {
                    console.error("Could not save BPMN diagram", err);
                });
        },
    }));
    return (
        <div>
            <div
                ref={bpmnModelerRef}
                id="flowCanvas"
                style={{ width: "100%", height: "600px", border: "1px solid #ccc" }}
            ></div>
        </div>
    );
});

export default BpmnModelerComponent;

bpmn-js 版本

17.9.1

技术栈基础库版本

react 18.3.1

[miyuesc]

react 严格模式，useEffect 会在加载时执行两次，导致两次 importXML 任务同时执行的问题。