TypeError: Cannot read property 'offsetWidth' of null

[hckhanh]

I try to place the diagram in a router then switch between other routers. Then I got this boy:

Uncaught TypeError: Cannot read property 'offsetWidth' of null
    at LabelWidget.render (LabelWidget.tsx:92)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at Object.enqueueSetState (react-dom.development.js:12639)
    at LocationProvider.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
    at index.js:103

[stanislav-grin]

Try call engine.setModel(null) in componentWillUnmount method (or in returned function in useEffect hook):

useEffect(() => {
  return () => {
    engine.setModel(null)
  }
}, [])

[johnsmithlon]

I have a similar error when using the react-tabs component and switching back and forth to a tab containing react-diagrams:

Uncaught TypeError: Cannot read property 'offsetWidth' of null at LabelWidget.render (LabelWidget.tsx:92) at finishClassComponent (react-dom.development.js:17160) at updateClassComponent (react-dom.development.js:17110) at beginWork (react-dom.development.js:18620) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at beginWork$1 (react-dom.development.js:23203) at performUnitOfWork (react-dom.development.js:22157) at workLoopSync (react-dom.development.js:22130) at performSyncWorkOnRoot (react-dom.development.js:21756) at react-dom.development.js:11089 at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at flushSyncCallbackQueueImpl (react-dom.development.js:11084) at flushSyncCallbackQueue (react-dom.development.js:11072) at discreteUpdates$1 (react-dom.development.js:21893) at discreteUpdates (react-dom.development.js:806) at dispatchDiscreteEvent (react-dom.development.js:4168)

I tried to put the useEffect hook above but I get an error:

TypeScript error in C:/React/my-app/src/App.tsx(18,21): Argument of type 'null' is not assignable to parameter of type 'DiagramModel<DiagramModelGenerics>'. TS2345

16 | useEffect(() => {
17 |   return () => {

18 | engine.setModel(null) | ^ 19 | } 20 | }, []) 21 |

[agarwalishan]

I am also getting this TypeError. If anyone has find the solution then please tell the reason for it. Thanks

[jcleyba]

Same here!

[johnsmithlon]

Ditto!

On Mon, 26 Oct 2020 at 15:42, jcleyba [email protected] wrote:

Same here!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/projectstorm/react-diagrams/issues/617#issuecomment-716633366, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOHIFMV6S6ECR624TS7TYZTSMWKGHANCNFSM4MJP5H2Q .

[palos01]

Same issue

`Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

The above error occurred in the <LabelWidget> component: in LabelWidget (created by PeformanceWidget) in g (created by PeformanceWidget) in PeformanceWidget (created by LinkWidget) in LinkWidget (created by LinkLayerWidget) in LinkLayerWidget (created by SmartLayerWidget) in SmartLayerWidget (created by CanvasWidget) in svg (created by Context.Consumer) in Styled(svg) (created by TransformLayerWidget) in TransformLayerWidget (created by CanvasWidget) in div (created by Context.Consumer) in Styled(div) (created by CanvasWidget) in CanvasWidget (at Diagram.tsx:77) in div (created by Context.Consumer) in Styled(div) (at Diagram.tsx:74) in Diagram (at Admin.tsx:26) in Route (at Admin.tsx:26) in Switch (at Admin.tsx:22) in div (at Admin.tsx:21) in div (at Admin.tsx:19) in div (at Admin.tsx:18) in Admin (at App.tsx:16) in Route (at PrivateRoute.tsx:14) in PrivateRoute (at App.tsx:15) in Switch (at App.tsx:14) in Router (created by BrowserRouter) in BrowserRouter (at App.tsx:13) in div (at App.tsx:12) in App (at src/index.tsx:13) in Provider (at src/index.tsx:13) `

[avestaHarsh]

@renato-bohler @dylanvorster can you please have a look on this issue? while I am trying to set engine.setModel(null) , it will give error .

[nurilkaa]

My diagram rerenders on switch between routes. I added cleanup to useEffect and it helped me

useEffect(() => {
 // other code
  return () => {
    engine.setModel(new DiagramModel())
  }
}, [])

[flieks]

i am still getting this after changing position of a node (dragdrop) which has relations to ports to other nodes)

[aaron-michaux]

I get this error when calling curve.getSVGCurve(), where curve is a BezierCurve.

[lung-andreea]

I am running into the same error when moving a node and then clicking anywhere on the canvas if I have any labels present. Couldn't this be solved by a simple null check like this?

const labelDimensions = {
   width: this.ref.current?.offsetWidth ?? 0,
   height: this.ref.current?.offsetHeight ?? 0
};