question-mark
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.

monitor.isDragging() throws error in collect function

See original GitHub issue

Describe the bug Hello, banging my head around this problem for half of the day already. Any help very appreciated

monitor.isDragging() throws error image

My DragSource looks like that

const ResizeHandler = DragSource(
    "RESIZE_TYPE",
    {
        beginDrag: ({id}) => ({id}),
        endDrag: (props, monitor) => {
            console.log(props, monitor.getDifferenceFromInitialOffset().x);
        },
    },
    (connectDnd, monitor) => ({
        connectDragSource: connectDnd.dragSource(),
        isDragging: monitor.isDragging(), // fatal here
    }),
)(({isDragging, connectDragSource}: {isDragging: boolean, connectDragSource: Function}) => (
    connectDragSource(
        <div
            className={styles.resizeHandler}
            style={{
                background: isDragging ? `blue` : null,
            }}
        />,
    )
));

And at the moment of calling monitor.isDragging() everything fails as it doesn’t have sourceId (equals to null).

Context is created by using DragDropContext(backend) and for backend is used some extended version of https://github.com/zyzo/react-dnd-mouse-backend

Expected behavior monitor.isDragging() should work without exceptions

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Mac OS 10.14.3
  • Browser: chrome 72.0.3626.121 (Official Build) (64-bit)
  • Version: 7.3.1

Additional context Add any other context about the problem here.

Thanks in advance

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
darthtrevinocommented, Mar 11, 2019

Oh right, that’s a known issue. I’ll spend some time on that today

On Mon, Mar 11, 2019, 9:39 AM Mikhail Yermolayev notifications@github.com wrote:

Currently I’m away of my laptop. Will try later One more thing to note: Everything works when I use Ref Callbacks. But when I pass ref from createRef API or useRef - it throws fatal

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/react-dnd/react-dnd/issues/1262#issuecomment-471619550, or mute the thread https://github.com/notifications/unsubscribe-auth/AAG7iOVUTFRCeL07KRgsG5U7TNPKHT0Kks5vVoavgaJpZM4boyji .

0reactions
darthtrevinocommented, Mar 13, 2019

What a PITA, I’m glad you found the issue though. Thanks @MikeYermolayev !

Read more comments on GitHub >

github_iconTop Results From Across the Web

React DND, connectDragSource not a function error
I've fixed my issue, by switching everything over from ES6 to ES5 Syntax. Really weird, but it worked, see code below:
Read more >
gaearon/react-dnd - Gitter
Inside of my DropTarget drop() function, monitor.getItem() is an empty ... I'm getting this error: "Error: Cannot have two HTML5 backends at the...
Read more >
Drag and Drop in React. Using react-dnd | by Sean LaFlam
In my case, the collectedProps item, becomes the isDragging prop which is provided as a property of monitor. Next, the drag reference ...
Read more >
How to use the react-dnd.useDrop function in react-dnd | Snyk
getBoundingClientRect() // Get vertical middle const hoverMiddleY ... reference = useRef(null); const [{isDragging}, drag] = useDrag({ item: {id: props.id, ...
Read more >
How to implement drag and drop in React with React DnD
Display an image preview; Reorder images with drag and drop; React drag and drop ... The onDrop function is enclosed in a useCallback...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found