TypeError：在reactjs中使用bpmn-auto-layout时，layoutProcess不是一个函数

Question

我有一个 xml，我想自动布局。所以我正在使用这个 bpmn-auto-layout

我像这样导入它

const layoutProcess = require('bpmn-auto-layout');

并像这样使用

const layoutedDiagramXML = await layoutProcess(xml);

但它会抛出错误

TypeError: layoutProcess is not a function when using bpmn-auto-layout

我调试了一下，发现

layoutProcess

对象是类型

Module {default: '/static/media/index.8f4f1d93.cjs', __esModule: true, Symbol(Symbol.toStringTag): 'Module'}

然后我尝试了

import { layoutProcess } from 'bpmn-auto-layout';

它说

Attempted import error: 'layoutProcess' is not exported from 'bpmn-auto-layout'.

甚至尝试过这样

import * as bpmnAutoLayout from 'bpmn-auto-layout';

同样的错误

甚至在它提到的图书馆上

import { layoutProcess } from 'bpmn-auto-layout';

const diagramXML = '<bpmn:defintions ...></bpmn:defintions>';

const layoutedDiagramXML = await layoutProcess(diagramXML);

console.log(layoutedDiagramXML);

有什么解决办法吗？

Answer 1

TypeError 可能可以通过其上方的

//@ts-expect-error Import type bug

或

//@ts-ignore

来抑制。您在控制台中看到了什么？图书馆还工作吗？我尝试了你的方法，创建一个 Typescript 文件并将其导入到我的代码中，以便执行它，即使使用顶级等待它也能工作，我在控制台中得到了这个（来自库测试源的固定装置中的测试代码）：

我的代码是：

import { layoutProcess } from 'bpmn-auto-layout';

    const diagramXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" +
        "<bpmn2:definitions xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:bpmn2=\"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\" xsi:schemaLocation=\"http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd\" id=\"simple\" exporter=\"camunda modeler\" exporterVersion=\"2.6.0\" targetNamespace=\"http://bpmn.io/schema/bpmn\">\n" +
        "  <bpmn2:process id=\"Process_1\" isExecutable=\"false\">\n" +
        "    <bpmn2:subProcess id=\"SubProcess_1\" name=\"Sub Process 1\">\n" +
        "      <bpmn2:incoming>SequenceFlow_3</bpmn2:incoming>\n" +
        "      <bpmn2:outgoing>SequenceFlow_2</bpmn2:outgoing>\n" +
        "      <bpmn2:startEvent id=\"StartEvent_1\" name=\"Start Event 1\">\n" +
        "        <bpmn2:outgoing>SequenceFlow_1</bpmn2:outgoing>\n" +
        "      </bpmn2:startEvent>\n" +
        "      <bpmn2:task id=\"Task_1\" name=\"Task\">\n" +
        "        <bpmn2:incoming>SequenceFlow_1</bpmn2:incoming>\n" +
        "      </bpmn2:task>\n" +
        "      <bpmn2:sequenceFlow id=\"SequenceFlow_1\" name=\"\" sourceRef=\"StartEvent_1\" targetRef=\"Task_1\"/>\n" +
        "    </bpmn2:subProcess>\n" +
        "    <bpmn2:endEvent id=\"EndEvent_1\" name=\"End Event\">\n" +
        "      <bpmn2:incoming>SequenceFlow_2</bpmn2:incoming>\n" +
        "    </bpmn2:endEvent>\n" +
        "    <bpmn2:sequenceFlow id=\"SequenceFlow_2\" name=\"\" sourceRef=\"SubProcess_1\" targetRef=\"EndEvent_1\"/>\n" +
        "    <bpmn2:startEvent id=\"StartEvent_2\" name=\"Start\">\n" +
        "      <bpmn2:outgoing>SequenceFlow_3</bpmn2:outgoing>\n" +
        "    </bpmn2:startEvent>\n" +
        "    <bpmn2:sequenceFlow id=\"SequenceFlow_3\" name=\"Flow\" sourceRef=\"StartEvent_2\" targetRef=\"SubProcess_1\"/>\n" +
        "  </bpmn2:process>\n" +
        "  <bpmndi:BPMNDiagram id=\"BPMNDiagram_1\">\n" +
        "    <bpmndi:BPMNPlane id=\"BPMNPlane_1\" bpmnElement=\"Process_1\">\n" +
        "      <bpmndi:BPMNShape id=\"_BPMNShape_SubProcess_2\" bpmnElement=\"SubProcess_1\" isExpanded=\"true\">\n" +
        "        <dc:Bounds height=\"300.0\" width=\"300.0\" x=\"300.0\" y=\"80.0\"/>\n" +
        "      </bpmndi:BPMNShape>\n" +
        "      <bpmndi:BPMNShape id=\"_BPMNShape_StartEvent_2\" bpmnElement=\"StartEvent_1\">\n" +
        "        <dc:Bounds height=\"36.0\" width=\"36.0\" x=\"352.0\" y=\"242.0\"/>\n" +
        "      </bpmndi:BPMNShape>\n" +
        "      <bpmndi:BPMNShape id=\"_BPMNShape_Task_2\" bpmnElement=\"Task_1\">\n" +
        "        <dc:Bounds height=\"80.0\" width=\"100.0\" x=\"420.0\" y=\"220.0\"/>\n" +
        "      </bpmndi:BPMNShape>\n" +
        "      <bpmndi:BPMNEdge id=\"BPMNEdge_SequenceFlow_1\" bpmnElement=\"SequenceFlow_1\" sourceElement=\"_BPMNShape_StartEvent_2\" targetElement=\"_BPMNShape_Task_2\">\n" +
        "        <di:waypoint xsi:type=\"dc:Point\" x=\"388.0\" y=\"260.0\"/>\n" +
        "        <di:waypoint xsi:type=\"dc:Point\" x=\"420.0\" y=\"260.0\"/>\n" +
        "      </bpmndi:BPMNEdge>\n" +
        "      <bpmndi:BPMNShape id=\"_BPMNShape_EndEvent_2\" bpmnElement=\"EndEvent_1\">\n" +
        "        <dc:Bounds height=\"36.0\" width=\"36.0\" x=\"650.0\" y=\"212.0\"/>\n" +
        "      </bpmndi:BPMNShape>\n" +
        "      <bpmndi:BPMNEdge id=\"BPMNEdge_SequenceFlow_2\" bpmnElement=\"SequenceFlow_2\" sourceElement=\"_BPMNShape_SubProcess_2\" targetElement=\"_BPMNShape_EndEvent_2\">\n" +
        "        <di:waypoint xsi:type=\"dc:Point\" x=\"600.0\" y=\"230.0\"/>\n" +
        "        <di:waypoint xsi:type=\"dc:Point\" x=\"650.0\" y=\"230.0\"/>\n" +
        "      </bpmndi:BPMNEdge>\n" +
        "      <bpmndi:BPMNShape id=\"_BPMNShape_StartEvent_11\" bpmnElement=\"StartEvent_2\">\n" +
        "        <dc:Bounds height=\"36.0\" width=\"36.0\" x=\"108.0\" y=\"212.0\"/>\n" +
        "        <bpmndi:BPMNLabel>\n" +
        "          <dc:Bounds height=\"0.0\" width=\"0.0\" x=\"126.0\" y=\"253.0\"/>\n" +
        "        </bpmndi:BPMNLabel>\n" +
        "      </bpmndi:BPMNShape>\n" +
        "      <bpmndi:BPMNEdge id=\"BPMNEdge_SequenceFlow_3\" bpmnElement=\"SequenceFlow_3\" sourceElement=\"_BPMNShape_StartEvent_11\" targetElement=\"_BPMNShape_SubProcess_2\">\n" +
        "        <di:waypoint xsi:type=\"dc:Point\" x=\"144.0\" y=\"230.0\"/>\n" +
        "        <di:waypoint xsi:type=\"dc:Point\" x=\"300.0\" y=\"230.0\"/>\n" +
        "        <bpmndi:BPMNLabel>\n" +
        "          <dc:Bounds height=\"21.0\" width=\"33.0\" x=\"192.0\" y=\"204.0\"/>\n" +
        "        </bpmndi:BPMNLabel>\n" +
        "      </bpmndi:BPMNEdge>\n" +
        "    </bpmndi:BPMNPlane>\n" +
        "  </bpmndi:BPMNDiagram>\n" +
        "</bpmn2:definitions>";

    const layoutedDiagramXML = await layoutProcess(diagramXML);
    console.log(layoutedDiagramXML);