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.

Library breaks when trying to create an Edge from a Handle that is generated programmatically

See original GitHub issue

Hi guys! First of all, thanks for the amazing library that React Flow is.

I’ve a Custom Node where I need to programmatically generate the Source Handles based on a list stored in data; the list is named groups and contains strings like ‘1’, ‘2’, … id is the Node Id.

const outputHandles = groups.map((group: string, outputIdx: number) => {
    const handleId = `${id}|${outputIdx}`;
    const leftPos = `${((100 / (groups.length + 1)) * (outputIdx + 1))}%`;

    return <Handle
      type="source"
      position={Position.Bottom}
      id={handleId}
      key={handleId}
      style={{ left: leftPos, background: getGroupColor(group) }}
    />;
  });

The Node is generated correctly showing an handle for each group, but when I try to drag a Edge out of the Handle I get this error:

scheduler.development.js:178 Uncaught TypeError: Cannot read property 'find' of null
    at ConnectionLine (cjs.js:12)
    at renderWithHooks (react-dom.development.js:14803)
    at updateFunctionComponent (react-dom.development.js:17034)
    at beginWork (react-dom.development.js:18610)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at flushPassiveEffectsImpl (react-dom.development.js:22883)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushPassiveEffects (react-dom.development.js:22820)
    at react-dom.development.js:22699
    at workLoop (scheduler.development.js:597)
    at flushWork (scheduler.development.js:552)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)

Issue Analytics

State:
Created 3 years ago
Comments:24 (11 by maintainers)

Top GitHub Comments

2reactions

sajaljaicommented, Jul 27, 2021

Hi Jaspooky, I missed that provider part in doc, it is working now when implemented in children of provider.

2reactions

RickeyWardcommented, Mar 31, 2021

When should I call the useUpdateNodeInternals hook? updateNodeInternals(handle_${_transIndex})

updateNodeInternals takes the ID of the node, you are passing the ID of the handle,

Top Results From Across the Web

Attach event to dynamic elements in javascript - Stack Overflow

myClass` will trigger the callback, // even elements created dynamically after the event listener was created. addDynamicEventListener(document.body ...

Dynamic link library (DLL) - Windows Client | Microsoft Learn

This article describes what a dynamic link library (DLL) is and the various issues ... When a program uses a DLL, a dependency...

Auto Layout Guide: Anatomy of a Constraint - Apple Developer

Describes the constraint-based system for laying out user interface elements.

Common Flutter errors

To fix this error, specify how tall the ListView should be. To make it as tall as the remaining space in the Column...

API - esbuild

There are two main API calls in esbuild's API: transform and build. ... in all cases (and doesn't try to be), it strives...