React-diagrams: TypeError: Cannot read property 'getTotalLength' of null

[isopterix]

Hi, i am unable to get the demo running.

I followed @cesarecaoduro post and have the same setup running. However, in my case I am not even getting to the blank screen. Instead react is throwing the error "TypeError: Cannot read property 'getTotalLength' of null".

Any ideas? Otherwise looks really cool. Would love to give it a shot at a process documentation project I am working on. Thanks.

[renato-bohler]

What is your React project setup? Is it server side rendered or something like that?

I've never had or seen this problem before.

[isopterix]

No, right now I am just using plain create-react-app with enabled typescript support.

[isopterix]

Looks like there was some kind of error somewhere in the copied code. I haven't figured out yet where exactly but after coping also the react component code shared by @cesarecaoduro rather than using the example one it its working now.

[softov]

i have created a clean project, a new file test.tsx, copy file demos\demo-simple (with deps ../helpers/DemoCanvasWidget) and it's not working, I'm getting the same result.

Cannot read property 'getTotalLength'

I made a npm link and until I can read the code the ref.current was null in the point that path was added to the Array

        this.props.link.setRenderedPaths(
            this.refPaths.map(ref => {
                return ref.current;
            })
        );

[zhanbst]

in example demo-simple, it's fire when link1.addLabel('Hello World!');

[Crumzor]

Hi, also running into this issue. It appears to only happen when using React.StrictMode during development. A production build does not show this issue.

Steps I took to replicate issue:

npx create-react-app my-app --template typescript
cd my-app
npm install  # Installs typescript types
npm install @projectstorm/react-diagrams closest lodash pathfinding paths-js emotion dagre mathjs resize-observer-polyfill @emotion/core @emotion/styled

Update src/App.tsx:

import React from "react";

import createEngine, {
  DefaultLinkModel,
  DefaultNodeModel,
  DiagramModel,
} from "@projectstorm/react-diagrams";
import { CanvasWidget } from "@projectstorm/react-canvas-core";
import "./App.css";

function App() {
  //1) setup the diagram engine
  var engine = createEngine();

  //2) setup the diagram model
  var model = new DiagramModel();

  //3-A) create a default node
  var node1 = new DefaultNodeModel({
    name: "Node 1",
    color: "rgb(0,192,255)",
  });
  node1.setPosition(100, 100);
  let port1 = node1.addOutPort("Out");

  //3-B) create another default node
  var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
  let port2 = node2.addInPort("In");
  node2.setPosition(400, 100);

  // link the ports
  let link1 = port1.link<DefaultLinkModel>(port2);
  link1.getOptions().testName = "Test";
  link1.addLabel("Hello World!");

  //4) add the models to the root graph
  model.addAll(node1, node2, link1);

  //5) load model into engine
  engine.setModel(model);
  return <CanvasWidget engine={engine} className="canvas" />;
}

export default App;

Temporary "fix" by:

• removing <React.StrictMode> tags from src/index.tsx
• changing src/index.css to include:
  css .canvas { height: 100vh; }

Trial and error approach (not ideal). Production builds work with <React.StrictMode> tags.

[DannyHinshaw]

@Crumzor thank you for the write up, I was experiencing all the exact same issues as you. You're solution works but this should really be unnecessary for a project claiming

"a super simple, no-nonsense diagramming library written in react that just works"

It does not, it took a day of tracking down errors and parsing repo issues.

[oliverrahner]

Steps I took to replicate issue:

These should really be in the docs, would have saved me hours of trying as I'm not really at home with npm and/or TypeScript

[johnsmithlon]

This also caught me - definitely should be added to docs

[TomHermanSAP]

@Crumzor 's walkthrough is perfect. Thank you!

The Official Guide misses two node modules that are needed to be installed manually:

• resize-observer-polyfill
• @emotion/styled

[patrickjm]

For googlers, anyone encountering this error on Firefox will instead receive the message, "TypeError: path is null".