BPMN React component

raminroufeh · June 14, 2022, 9:41pm

I try this code but BPMN does not display. its just blank page with bpmn logo on the bottom. How would I import BPMN file?

github.com

bpmn-io/react-bpmn/blob/master/src/index.jsx

import React from 'react';

import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';


export default class ReactBpmn extends React.Component {

  constructor(props) {
    super(props);

    this.state = { };

    this.containerRef = React.createRef();
  }

  componentDidMount() {

    const {
      url,
      diagramXML

This file has been truncated. show original

Martin · June 15, 2022, 1:20pm

Hi,

How does your code look like? Have you supplied the XML or a diagram URL as a prop? Is the URL reachable?

You can also have a look into the example folder for a usage example. I just tested it and it still works.

raminroufeh · June 15, 2022, 3:48pm

Hi
I just import bpmn file from local filesystem and include it in constructor state.
Screenshot from 2022-06-15 11-45-01
Is there any example to show how supply XML file in React component ?

Thanks

Martin · June 16, 2022, 12:46pm

It looks like you are getting the diagramXML from the props (I guess it is undefined) instead of the state.

What you want to do is something like const { diagramXML } = this.state; instead

raminroufeh · June 16, 2022, 6:16pm

Now I get this error?!
Screenshot from 2022-06-16 14-11-05

Martin · June 17, 2022, 1:28pm

Without knowing your setup, it is very hard to guess what goes wrong. Might be your bpmn being broken, or not using a correct loader for the bpmn file.

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.