Canvas crashes when browser DOM updates (TypeError: Cannot read properties of null (reading 'offsetWidth'))

[louis-md]

Hello,

First off congrats for this great project!

I encountered an issue when trying to use react-diagrams while the browser DOM updates. Let's consider a project such as:

• Page 1 -> imports component A -> loads diagram. The the user dynamically loads page 2 (with react-router-dom for instance):
• Page 2 -> imports component B -> imports component A -> does not load any diagram (voluntarily) -> The user then comes back to page 1:
• Page 1 -> imports component A -> tries to load the diagram -> application crashes (TypeError: Cannot read properties of null (reading 'offsetWidth')).

Using react-diagrams at version 6.7.0, and even with the simplest diagram possilble:

const Diagram = () => {
  const engine = createEngine()
  engine.setModel(new DiagramModel())
  return <CanvasWidget engine={engine} />
}

it will trigger:

When changing "Page 2" so that it imports component A directly (instead of component B), the problem does not occur.

No problem when mounting, unmounting, remounting or updating with react's shadow DOM. The error seems to occur when the browser DOM (not React's shadow DOM) updates, e.g. when there is a change in react's component tree.

Thanks in advance for the help.

[jpros]

Any updates on this one?

[jpros]

This one should be closed by this: https://github.com/projectstorm/react-diagrams/issues/671