[12.7.1] Error: <rect> attribute width: Expected length, "NaN".

[boris-petrov]

Describe the Bug

Updating from 12.7.0 to 12.7.1 leads to these validation errors in Chrome:

Error: <rect> attribute width: Expected length, "NaN".

Steps to Reproduce

Just open any definition.

Expected Behavior

No such error.

Environment

Please complete the following information:

• Browser: Chrome 119
• OS: Linux
• Library version: 12.7.1

[nikku]

Cannot reproduce on demo.bpmn.io along with [email protected].

Please share concrete steps to reproduce the issue.

[boris-petrov]

It doesn't happen there, you're right. Well, I could try creating a reproduction, yes. Before that, maybe you'll have an idea:

The error happens in tiny-svg/dist/index.esm.js. This is the stack-trace:

setAttribute (index.esm.js:47)
setAttributes (index.esm.js:47)
attr (index.esm.js:56)
createOutline (Outline.js:22)
(anonymous) (Outline.js:24)
invokeFunction (EventBus.js:254)
EventBus._invokeListener (EventBus.js:215)
EventBus._invokeListeners (EventBus.js:208)
EventBus.fire (EventBus.js:192)
Canvas._addElement (Canvas.js:299)
Canvas.addConnection (Canvas.js:315)
BpmnImporter.add (BpmnImporter.js:62)
element (Importer.js:33)
visit (BpmnTreeWalker.js:35)
visitIfDi (BpmnTreeWalker.js:35)
handleSequenceFlow (BpmnTreeWalker.js:67)
(anonymous) (BpmnTreeWalker.js:67)
handleDeferred (BpmnTreeWalker.js:53)
handleDefinitions (BpmnTreeWalker.js:52)
(anonymous) (Importer.js:35)
forEach (index.esm.js:131)
render (Importer.js:35)
(anonymous) (Importer.js:38)
importBpmnDiagram (Importer.js:38)
open (BaseViewer.js:205)
importDefinitions (BaseViewer.js:182)
importXML (BaseViewer.js:156)
await in importXML (async)
... my code

I see in the setAttributes call that the attrs that are being looped are:

class: "djs-outline",
fill: "none",
height: NaN,
rx: 4,
width: NaN,
x: -5,
y: -5

Not sure if that helps you?

The issue also happens with diagram-js 12.7.2.

[nikku]

Please ensure you can clearly reproduce when it starts to fail:

• [email protected]
• [email protected]
• [email protected]

I don't see how it could be caused by the patch releases.

Please also share some more details on how you use diagram-js. #817 could be the relevant change that broke your setup, but we'd need to understand how.

[boris-petrov]

Thanks for taking the time!

As I mentioned in the first post, 12.7.0 works fine, 12.7.1 and 12.7.2 break. So the issue has appeared between 12.7.0 and 12.7.1.

As for how I use diagram-js - I don't use it directly. I use camunda-bpmn-js like so:

this.modeler = new BpmnNavigatedViewer({
  container: this.element as HTMLElement,
  bpmnRenderer: {
    defaultFillColor: 'var(--bs-body-bg)',
    defaultStrokeColor: 'var(--bs-body-color)',
  },
});

await this.modeler.importXML(model);

The rest you can see from the stack-trace I pasted above - it starts with the importXML call.

[nikku]

If it broke with v12.7.1 then 00d8c28 may be relevant. You could debug it to see if it the culprit.

[boris-petrov]

connection.added is invoked, createOutline is called, in it element.width and element.height are undefined. element is ConnectionImpl:

di: ModdleElement {id: 'SequenceFlow_1hijaq7_di', waypoint: Array(2), $parent: ModdleElement, …},
hidden: undefined,
id: "SequenceFlow_1hijaq7",
labels: [__refs_collection: true, remove: ƒ, contains: ƒ, add: ƒ],
type: "bpmn:SequenceFlow",
waypoints: (2) [{…}, {…}],

Does that help?

[nikku]

We can now reproduce this internally, cf.