Import Error unparsable content detected

Users
1

Hello, create BPMN model online on your website. Save it on my computer. And then try to open it once again and recived next message:

unparsable content detected
line: 0
column: 0
nested error: missing start tag

What does it mean? Link on the file in Att. The file is very important for me.
Thanks in advanced.
Sergei

2

Not sure what you uploaded but the attached file is empty.

3

Yes, I’ve thought the same too, but I open this file from other computer, and the message was not the same
The photo is in att.


Thanks

4

Hello, I have the same error, I use the bpmn from this sandbox

5

I can’t see any error appearing in the sandbox you shared.

6

Hello, When I took that BPMN to my project I got this message the following message:

But if I use API call, the error disappears. My case is I have 100+ BPMNs which I have to show to users in different processes which task they are currently in.

Below is the React component I am currently working on

The Dependencies
“axios”: “^0.20.0”,
“bpmn-js”: “^7.3.0”,

/The Component/

import Modeler from “bpmn-js/lib/Modeler”;
import “bpmn-js/dist/assets/diagram-js.css”;
import “bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css”;
import axios from ‘axios’;

function App() {
const[diagram,diagramSet] = useState(‘’)
const container = document.getElementById(“container”);
useEffect(()=>{

    if(diagram.length ===0){
        axios.get('https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/master/colors/resources/pizza-collaboration.bpmn')
            .then(r =>{
                diagramSet(r.data)
            })
            .catch(e =>{console.log(e)})
    }
},[diagram])
if(diagram.length >0){
    const modeler = new Modeler({
        container,
        keyboard: {
            bindTo: document
        }
    });
    modeler
        .importXML(diagram)
        .then(({ warnings }) => {
            if (warnings.length) {
                console.log("Warnings",warnings);
            }

           const canvas = modeler.get("modeling");
            canvas.setColor('CalmCustomerTask', {
                stroke: 'green',
                fill: 'yellow'
            })
        })
        .catch(err => {
            console.log("error",err);
        });
}

return (


<div id=“container” style={{border:‘1px solid #000000’,height:“90vh”,width:“60vw”, margin:‘auto’}}>


);
}
export default App;

7

It seems like you’re trying to import an empty diagram.

8

I just Copied the Diagram to my project, I have to check that out.
I want to open the modeler in a readOnly mode and highlighting the current Task.

For highlighting the task I use the method setColor

const canvas = modeler.get(“modeling”);
canvas.setColor(‘CalmCustomerTask’, {
stroke: ‘green’,
fill: ‘yellow’
})
})
But it does not work!

and for making a readOnly modeler I have not gotten an option for that

9

in snippet diagram is set to r.data
instead it should be r.data.bpmn20Xml

with this change importxml will consume bpmn20Xml instead of the object which was throwing the error of unparsable content