reactjsbpmnbpmn-js

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

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
Solution

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