Import Error unparsable content detected

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

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

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

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

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

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;

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

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

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