Cannot read property 'width' of undefined

I’m upgrading the bpmn-js library, that we use in our application, from 20.5 to 24.0. When adding a label, I get the: Cannot read property ‘width’ of undefined.

Following is the stacktrace that comes up in the browsers log:

Uncaught TypeError: Cannot read property 'width' of undefined
    at i.update (bpmn-modeler.min.js:formatted:2921)
    at i.Object.getPrototypeOf.complete (plan.js:1350)
    at bpmn-modeler.min.js:formatted:2773
    at o (bpmn-modeler.min.js:formatted:12573)
    at i._invokeListener (bpmn-modeler.min.js:formatted:12669)
    at i._invokeListeners (bpmn-modeler.min.js:formatted:12662)
    at i.fire (bpmn-modeler.min.js:formatted:12640)
    at m (bpmn-modeler.min.js:formatted:15063)
    at a.A [as init] (bpmn-modeler.min.js:formatted:15201)
    at f (bpmn-modeler.min.js:formatted:17637)

Found out what the problem is, would be getting back with more information.

The problem was, in v0.24.0 the anonymous function that is created take 4 parameters:
LabelEditingProvider.prototype.update = function(element, newLabel, activeContextText, bounds) {}

whereas in v0.20.5 it takes 2:
LabelEditingProvider.prototype.update = function(element, newLabel) {}

This is how the function is invoked in our appication(plan.js):

        Object.getPrototypeOf(directEditingObj).complete = function() {

        var active = this._active;
        if (!active) {
            return;
        }

        var text = this.getValue().trim();

        if (requiresValidatedLabel(active.element.businessObject) &&  !this._validate(active.element.businessObject, text)) {
            // invalid text content path
            var activeText = active.context.text.trim();
            console.log("activeText: ", activeText);
            if(activeText === ''){
                var defaultText = 'New_' + active.element.businessObject.id;
                 // fires 'commandStack.element.updateLabel.executed' event
                active.provider.update(active.element, defaultText, active.context.text);
            }else{
                active.provider.update(active.element, active.context.text, active.context.text);
            }
        } else {
            // normal path
            if (text !== active.context.text) {
                active.provider.update(active.element, text, active.context.text);
            }
            this._fire('complete');
            this.close();
        }
    };

I don’t know why we were passing it 3 args instead of 2. Anyway what’s the 4th argument that is to be passed to the anonymous function? ie How can I calculate bounds arg?
LabelEditingProvider.prototype.update = function(element, newLabel, activeContextText, bounds) {…}

Haha, so whatever you do it looks like a massive hack. What would you like to achieve? There is certainly no need to hack into direct editing like this.

1 Like

Lol, I’ll have to talk to the rest of the team to answer you question. But I agree with you, there’s a lot of shitty code, hacks across the application which make life miserable for noobs like me.

But regarding my question of getting the ‘bounds’, I figured out by logging the different objects in that function:

...
} else {
    active.provider.update(active.element, text, active.context.text, active.context.bounds);
}

‘Undefined’ is the property of the global object. This error occurs in Chrome Browser when you read a property or call a method on an undefined object . Uncaught TypeError: Cannot read property of undefined error is probably easiest to understand from the perspective of undefined, since undefined is not considered an object type at all (but its own undefined type instead), and properties can only belong to objects within JavaScript. There are a few variations of this error depending on the property you are trying to access. Sometimes instead of undefined it will say null. If you get undefined error, you need to make sure that which ever variables throws undefined error, is assigned a value to it.