question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError: Cannot read property 'getTotalLength' of null

See original GitHub issue

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"> <div class="d-flex justify-content-center"> logo <CanvasWidget engine={engine} /> </div> </div> ); }

export default App; `

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:2
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
sagivocommented, Dec 3, 2020

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

4reactions
JSv4commented, Jul 19, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Uncaught TypeError: Cannot read property 'getTotalLength' of ...
var path = document.querySelector(pathname);. is returning null. This doesn't affect the codepen because it is running the Javascript after the ...
Read more >
etheme.min.js Cannot read property getTotalLength - 8THEME
etheme.min.js:1 Uncaught TypeError: Cannot read property 'getTotalLength' of null at Object.backToTop (etheme.min.js:1)
Read more >
Cannot read property 'getTotalLength' of null - HashThemes
This is preventing other plugins from loading on my page. Please help.
Read more >
SVG animation not working : r/javascript - Reddit
... page it doesn't work anymore. I keep getting this message in console: Uncaught TypeError: Cannot read property 'getTotalLength' of null.
Read more >
gettotallength is not a function - You.com | The search engine you ...
basically when you are creating the svg you would set a ref on the path and then you ... Uncaught TypeError: Cannot read...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found