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

Question

I have an xml that i want to auto layout. So I am using this bpmn-auto-layout

And I am importing it like this

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

and using like this

const layoutedDiagramXML = await layoutProcess(xml);

but it throws the error

Failed to compile.
TypeError: layoutProcess is not a function when using bpmn-auto-layout

i debugged and found that the layoutProcess object is of type

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

Then i tried

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

it says

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

tried even like this

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

same error

even on the library it mentioned

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

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

const layoutedDiagramXML = await layoutProcess(diagramXML);

console.log(layoutedDiagramXML);

what can be the solution?

UPPDATE

After importing like this

const bpmnLayout = require('bpmn-auto-layout/dist/index.esm');

and using like this

const layoutedDiagramXML = await bpmnLayout.layoutProcess(xml);

import worked but now it is throwing error

Error: required args <xml=string>
    at error (index.esm.js:68:1)
    at Parser.parse (index.esm.js:293:1)
    at index.esm.js:884:1
    at new Promise (<anonymous>)
    at push../node_modules/moddle-xml/dist/index.esm.js.Reader.fromXML (index.esm.js:879:1)
    at push../node_modules/bpmn-moddle/dist/index.esm.js.BpmnModdle.fromXML (index.esm.js:58:1)
    at BaseViewer.js:144:1

Answer 1

I had to change the import like this

const bpmnLayout = require('bpmn-auto-layout/dist/index.esm');

and then used like this

const layoutedDiagramXML = await bpmnLayout.layoutProcess(xml);

Answer 2

TypeError probably can be suppressed with //@ts-expect-error Import type bug or //@ts-ignore above it. What do you see in the console? Does the library work? I tried your approach, creating a Typescript file and importing it into my code so it would be executed, and even with top-level await it worked and I got this in my console (from test code in library test source's fixtures):

My code was:

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);