TypeError: Cannot read property 'getTotalLength' of null

[wibav]

testing the library with the example found in the documentation presents me with the following error

TypeError: Cannot read property 'getTotalLength' of null

`import React from 'react'; import logo from './logo.svg'; import './App.css'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; // Archivo CSS de Bootstrap 4 import '../node_modules/bootstrap/dist/js/bootstrap.min.js'; // Archivo Javascript de Bootstrap 4 npm audit import createEngine, { DefaultLinkModel, DefaultNodeModel, DiagramModel } from '@projectstorm/react-diagrams';

import { CanvasWidget } from '@projectstorm/react-canvas-core';

// create an instance of the engine with all the defaults const engine = createEngine();

// node 1 const node1 = new DefaultNodeModel({ name: 'Node 1', color: 'rgb(0,192,255)', }); node1.setPosition(100, 100); let port1 = node1.addOutPort('Out');

// node 2 const node2 = new DefaultNodeModel({ name: 'Node 1', color: 'rgb(0,192,255)', }); node2.setPosition(100, 100); let port2 = node2.addOutPort('Out');

// link them and add a label to the link const link = port1.link(port2); link.addLabel('Hello World!');

const model = new DiagramModel(); model.addAll(node1, node2, link); engine.setModel(model);

function App() { return ( <div className="App bg-dark">

<img src={logo} className="App-logo" alt="logo" /> <CanvasWidget engine={engine} />

); }

export default App; `

[renato-bohler]

Seems like a duplicate of both #598 and #618... have you checked these?

[JSv4]

Looks like I'm running into this as well with the basic example from the docs.

[JSv4]

I am seeing the same behavior. I'm following the introductoy tutorial here: https://projectstorm.gitbook.io/react-diagrams/getting-started. If I comment out the line:

link.addLabel('Hello World!');

The demo works. If I add the label, however, I get the same TypeError:

TypeError: Cannot read property 'getTotalLength' of null

[sagivo]

Same issue here. Removing link.addLabel('Hello World!'); solved it for me.

[tiholic]

This is how you should add a link

https://github.com/projectstorm/react-diagrams/blob/3060496db0709c37202bca948031cd02ebcc73a7/diagrams-demo-gallery/demos/demo-serializing/index.tsx#L28

[sovetski]

Same issue here. Removing link.addLabel('Hello World!'); solved it for me.

I have the same problem, removing the label works, but I need to keep my labels, the project is still maintained?

[marian2js]

I made a PR that fixes this issue: https://github.com/projectstorm/react-diagrams/pull/1014

[abhishek-doe]

@marian2js @sagivo @wibav @JSv4 @dylanvorster Is there any simple way to fix this issue? @marian2js i don't know how to use your corrected code in my project?