No provider for "#canvas"! when rendering bpmn diagram

Developers
1

When rendering the bpmn diagram, i’m using the following code:

var viewer = new BpmnJS({

        container: '#canvas'

      });

      viewer.importXML(xml);

      viewer.get('#canvas'); //use 'fit-viewport' for full size

      }, err => {

        console.log("bpmn error: " + err);

      });

The diagram renders properly, but i still receive the following error in the console:

vendor.js:70186 ERROR Error: No provider for “#canvas”! (Resolving: #canvas)

2

Hey,

viewer.importXML is an async API. You need to await for its completion.

Check here: https://github.com/bpmn-io/bpmn-js-callbacks-to-promises#importXML

3

First of all you should wait for the import to finish. Second, the error message clearly shows that there is no feature called #canvas, you probably want to use canvas:

await bpmnJS.importXML(xml);

const canvas = bpmnJS.get('canvas');

canvas.zoom('fit-viewport');