Hi,
I'm having an issue when trying to connect a node.
This specific node was loaded over http from a hook (useEffect) and only has a source port.
When I try to draw an edge I sometimes receive an error immediately and other times it manages to render the line but after a certain amount of ticks throws the same error.
I traced the issue back to this line:
const sourceHandle = handleId
? sourceNode.__rg.handleBounds[handleKey].find((d: HandleElement) => d.id === handleId)
: sourceNode.__rg.handleBounds[handleKey][0];
It appears that handleBounds[handleKey] ends up being undefined causing this to break.
I'm updating the elements in the graph using setElements
Changing the implementation to use optional chaining seems to fix the issue but I'm not sure what the side effects might be.
const sourceHandle = handleId
? sourceNode.__rg.handleBounds[handleKey].find((d: HandleElement) => d.id === handleId)
: sourceNode.__rg.handleBounds[handleKey]?.[0];
Full stack trace:
connectionSourceId 05000d8f-2eea-4f08-aeb8-d8fc9b2dbf77
index.tsx:33 sourceIdSplitted ["05000d8f-2eea-4f08-aeb8-d8fc9b2dbf77"]
index.tsx:30 connectionSourceId 05000d8f-2eea-4f08-aeb8-d8fc9b2dbf77
index.tsx:33 sourceIdSplitted ["05000d8f-2eea-4f08-aeb8-d8fc9b2dbf77"]
index.tsx:30 connectionSourceId 05000d8f-2eea-4f08-aeb8-d8fc9b2dbf77
index.tsx:33 sourceIdSplitted ["05000d8f-2eea-4f08-aeb8-d8fc9b2dbf77"]
Uncaught TypeError: Cannot read property '0' of undefined
at ConnectionLine (index.tsx:53)
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)
ConnectionLine @ index.tsx:53
renderWithHooks @ react-dom.development.js:14803
updateFunctionComponent @ react-dom.development.js:17034
beginWork @ react-dom.development.js:18610
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
flushPassiveEffectsImpl @ react-dom.development.js:22883
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164
index.js:1 The above error occurred in the <ConnectionLine> component:
in ConnectionLine
in g
in svg
in Unknown
in div
in Unknown (created by ReactFlow)
in StoreProvider (created by ReactFlow)
in div (created by ReactFlow)
in ReactFlow (at Test/index.js:107)
in BasicFlow (at src/index.js:89)
in Route (at src/index.js:89)
in Switch (at src/index.js:87)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:84)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
flushPassiveEffectsImpl @ react-dom.development.js:22883
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164
scheduler.development.js:178 Uncaught TypeError: Cannot read property '0' of undefined
at ConnectionLine (index.tsx:53)
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)
I've been trying to debug this issue by pulling the source code and linking my application (in typescript) to the library using yarn link
and "react-flow-renderer": "file:../react-flow/",
but with both I seem to be unable to import the typings causing it to not work anymore and I can't seem to figure out why it works fine when using the node_modules version and it stops working when using the linked version. Normal imports are working just fine but when importing certain typings it breaks. It's basically everything that is being exported from src/types/index.ts
See:
![Schermafbeelding 2020-05-27 om 11 33 48](https://user-images.githubusercontent.com/424370/83003071-175a4680-a00e-11ea-8f23-71d7ddc841ae.png)
I can split this up into two issues if this second one is actually an issue and not some misconception from my side.