Bug - Uncaught TypeError: Cannot read property 'position' of undefined

[wdfinch]

My app is crashing due to an uncaught exception. See below for details. Perhaps this could be handled more gracefully such a console warning?

Uncaught TypeError: Cannot read property 'position' of undefined
    at nodes.reduce.x (zoom.js:448)
    at Array.reduce (<anonymous>)
    at getRectOfNodes (zoom.js:448)
    at zoom.js:448
    at easy-peasy.esm.js:333
    at simpleProduce (easy-peasy.esm.js:305)
    at runActionReducerAtPath (easy-peasy.esm.js:332)
    at reducerForActions (easy-peasy.esm.js:342)
    at rootReducer (easy-peasy.esm.js:361)
    at dispatch (redux.js:213)
    at easy-peasy.esm.js:538
    at easy-peasy.esm.js:807
    at index.js:11
    at Object.dispatch (easy-peasy.esm.js:890)
    at actionCreator (easy-peasy.esm.js:698)
    at zoom.js:448
    at commitHookEffectListMount (react-dom.development.js:19731)
    at commitPassiveHookEffects (react-dom.development.js:19769)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at flushPassiveEffectsImpl (react-dom.development.js:22853)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushPassiveEffects (react-dom.development.js:22820)
    at performSyncWorkOnRoot (react-dom.development.js:21737)
    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 discreteUpdates$1 (react-dom.development.js:21893)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

[moklick]

Hey! Thanks for the report. How can we reproduce this issue?

[harish-madugula]

Hey,

I think you are trying to access the position property of an element which is not a node (may be an edge).

so, that error usually comes when you try to access position which doesnt have position.

Try checking with the built in - isNode(arr[element]) && // your functionality.

just a guess.

try if it works. I got this issue few times.

this.state.elements.find((el, key) => { if (isNode(el)) { // your functionality } } something like this.

[wdfinch]

So the issue happens when the flow is being rendered. I'm not trying to access the position property of a node. I'm not sure what's causing this as my input seems valid.

[harish-madugula]

can you may be post the input, and a way to debug it. we'll see if we can help in any way. :)

[moklick]

Can you create a codesandbox or repo so that we can check your code?

[wdfinch]

So I'm having a tough time reproducing because I'm using a number of custom labels as well as custom edges that would take some time to port over to code sandbox. I tried removing all of those and it seemed to render fine then. I'm going to do some more investigating to see if I can find the cause here. Hopefully, the stack trace above helps in some way. Thanks for the help here though. Really appreciate the quick responses.

[wdfinch]

@moklick @harish-madugula

Ok so after a lot of testing I finally was able to reproduce this in code sandbox.

The issue seems to be related to updating the position of a node, unmounting the flow render component, and then trying to remount. I also notice this issue when the nodes the flow works on are changed specifically when the flow rendered component is unmounted.

I think the issue is some redux state for the component is being preserved when the component is unmounted and then when it tries to read it again on mount, it throws an error.

Steps to reproduce.

1. Toggle the flow on
2. Reposition some nodes
3. Toggle the flow off
4. Add nodes
5. Toggle the flow on

Update: You could actually skip step 4. Just remounting after the position of a node has been changed is enough to crash it.

I've attached a screen recording as well to show these steps. See the google drive link if you're having trouble.

https://drive.google.com/file/d/1FrQT1HwJhCU-L2q-v6ugAQG_7aYhcdio/view?usp=sharing https://codesandbox.io/s/cranky-worker-dymfw?file=/src/App.js

[moklick]

Ok, thanks for the detailed information on this :) I will see how we can fix this

[wdfinch]

Thanks, @moklick. It's really hard to use the functionality your library provides in my app right now because of the crashes, so it would be awesome if this could be patched soon.

[moklick]

I just implemented a fix. Can you check v5.9.4?

[wdfinch]

Seems like this is fixed now. I will continue testing to make sure. Thanks so much for getting this out quickly. I really appreciate it.

[chiester]

I get a similar error (both before and after upgrading to 5.9.4): cjs.js:12 Uncaught TypeError: Cannot read property 'x' of undefined

the cjs.js is:

var _require = require('./Draggable'),
    Draggable = _require.default,
    DraggableCore = _require.DraggableCore; // Previous versions of this lib exported <Draggable> as the root export. As to no-// them, or TypeScript, we export *both* as the root and as 'default'.
// See https://github.com/mzabriskie/react-draggable/pull/254
// and https://github.com/mzabriskie/react-draggable/issues/266

module.exports = Draggable;
module.exports.default = Draggable;
module.exports.DraggableCore = DraggableCore;```

[wdfinch]

@chiester Could you link to a code sandbox with steps on how to reproduce the issue.

[danyflorez]

Hi @chiester, were you able to resolve your problem? I'm having the same error.

[danyflorez]

🆙 My error was due to messing up with node.rf.width and node.rf.height properties