TypeError: Cannot read property 'getTotalLength' of null

[vinayakvivek]

I was trying out one of the demos. This error appears whenever I use a link label. Nodes and links get rendered with no issues, if I don't use any link label.

Detailed error: In LabelWidget.findPathAndRelativePositionToRenderLabel

  8194 | this.findPathAndRelativePositionToRenderLabel = index => {
  8195 |   // an array to hold all path lengths, making sure we hit the DOM only once to fetch this information
  8196 |   const link = this.props.label.getParent();
> 8197 |   const lengths = link.getRenderedPath().map(path => path.getTotalLength()); // calculate the point where we want to display the label
  8198 |                                                           ^  
  8199 |   let labelPosition = lengths.reduce((previousValue, currentValue) => previousValue + currentValue, 0) * (index / (link.getLabels().length + 1)); // find the path where the label will be rendered and calculate the relative position
  8200 | 

If anyone could point out why this is happening and a solution for the same, it'd be really helpful.

[renato-bohler]

Seems like duplicate of #598, which is closed... maybe we should reopen it?

Beep @pierre-moire

[janaka]

In case somebody else misses the workaround mentioned in #598

Had to remove <React.StrictMode> to get around this error.

[AndrewKirkovski]

So I tracked down root of this issue:

https://github.com/projectstorm/react-diagrams/blob/master/packages/react-diagrams-defaults/src/link/DefaultLinkWidget.tsx#L112

this.refPaths = []; in render method resets every time DefaultLinkWidget re-renders

Link segments, however, do not re-render as many times as DefaultLinkWidget. I.e. I tracked down in React.Strict + dev mode render of DefaultLinkWidget actually happens twice, but link segments are not re-rendered second time, so refs are lost in previous instance of this.refPaths = []; and never are getting to new one

Since I have custom Widgets in own project, I changed my CustomLinkWidget to only have one ref to g element like ref: React.RefObject<SVGGElement>; and am collecting needed path elements with querySelectorAll by special data attribute used in CustomLinkSegmentWidget

Not sure what proper solution would be for that

[AdrianLsk]

@AndrewKirkovski HUGE thank you for sharing the workaround.

[sovetski]

I have the same problem...

[marian2js]

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