I am getting error on bmn-js-example


In our project, we use typescript, angular js and webpack,npm . I added dependencies. I can create a BPMN canvas. But When I try overlay.add (https://github.com/bpmn-io/bpmn-js-examples/tree/master/overlays) or other basic methods (canvas.addmarker) . I also tried with other XMLs in the examples. why i get this error, can you help me . What can this be about?

my code:
var xml = data[‘bpmn20Xml’];
this.viewFlag = true;
this.viewer = new bpmn({container: ‘#canvas’});

                        this.viewer .importXML(xml)

                                var canvas = this.viewer .get('canvas'),
                                overlays = this.viewer .get('overlays');


                            // zoom to fit full viewport
                       //    canvas.zoom('fit-viewport'); --it is not working 

                            // attach an overlay to a node
                    overlays.add('shipment', {
                                position: {
                                    bottom: 0,
                                    right: 0
                                html: '<div >Mixed up the labels?</div>'


I always get the following same error:

Error: invalid element specified
at Overlays.add (vendor.b44becd3d71a62153e90.bundle.js:113575)
at app.bundle.js:1735
at processQueue (vendor.b44becd3d71a62153e90.bundle.js:86265)
at vendor.b44becd3d71a62153e90.bundle.js:86309
at Scope.$digest (vendor.b44becd3d71a62153e90.bundle.js:87404)
at Scope.$apply (vendor.b44becd3d71a62153e90.bundle.js:87702)
at done (vendor.b44becd3d71a62153e90.bundle.js:81820)
at completeRequest (vendor.b44becd3d71a62153e90.bundle.js:82046)
at XMLHttpRequest.requestLoaded (vendor.b44becd3d71a62153e90.bundle.js:81974) “Possibly unhandled rejection: {}”


this error is thrown if you specify an invalid element. You must either specify an ID of an element or the element itself. Are you sure shipment is a valid element ID?