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

SunilGarg
August 9, 2023
314 views
0 votes
2 Answers

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

Answers

Chosen as BEST ANSWER
- SunilGarg
- August 9, 2023 at 8:20 am
- 0 votes
0
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);
```

(Edit)

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

Please signup or login to give your own answer.

Click here to cancel reply.