TypeError: Cannot read property 'getTotalLength' of null
See original GitHub issuetesting 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">
<div class="d-flex justify-content-center">
<CanvasWidget engine={engine} />
</div>
</div>
);
}
export default App; `
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:5 (1 by maintainers)

Top Related StackOverflow Question
Same issue here. Removing
link.addLabel('Hello World!');solved it for me.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