React-beautiful-dnd: Invariant failed. Again and again and again.

[MitchEff]

I'm afraid I don't have any more context, because it just doesn't give me any - just "Invariant failed" over and over. I'm somewhat at my rope's end (my clients most certainly are), I've tried everything on the planet to combat this.

• There's no other errors
• There's no other context (I'm not deleting, adding, etc. Just trying to drag)
• I create an array of IDs every render to check against to ensure there are no duplicates whatsoever
• Somehow that made it even _more_ unreliable

I've tried everything I can think of, but it's just sort of getting worse. I've seen this raised a few times without any real solutions - if there's something going wrong, is there any other way of finding out what it is?

Browsers:
All of them. Chrome, Safari, Firefox, IE

React:
16.4.1

React Deautiful DnD:
8.0.5

[alexreardon]

Hi there!

Thanks for raising this issue. Can you please create a standalone example on codesandbox.io using our boilerplate: https://codesandbox.io/s/k260nyxq9v

Without a standalone example, we will not be able to action this one

Cheers!

[alexreardon]

Can you please upgrade to 10.x

[alexreardon]

We are closing this issue due to inactivity. If you would like to continue the conversation feel free to reply to this issue and we can reopen it if needed.

[nicubarbaros]

@alexreardon same happens in our app. Our users get Invariant failed after updating to v10 from v7.

On our side, we only get Invariant failed error, with no any other information.

I am trying to reproduce it but never succeeded.
Some of the cases are when the users are trying to drag a draggable, or a new draggable inserted in the DragDropContext and the one that was about to return the error was "moved". Though after a browser refresh all goes back to normal.

My suspicion is that somehow the DragDropContext forgets about the existence of a draggable, and for some reason, it crashes.

Possible the same problem as #917

[millarm]

I had this exact same issue.

Good news 1: I've been able to reproduce it in a simple example.
Good news 2: It's not a react-beautiful-dnd bug, but it's a change in behaviour from earlier versions

The root cause was I was changing the style of the div in a draggable -> with 10.x you need to include t he existing style this is documented here https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md as it uses the end of the animation to drive the state changes.

So the fix is... follow the documentation and set your style with something like this:

  getStyle = (style, snapshot, backgroundColor): ?Object => {
    return {
      ...style,
      borderBottomColor: backgroundColor,
      backgroundColor: `${backgroundColor}`,
    };
  };

I hope this helps others!

[millarm]

Actually, thought - could (in debug mode) react-beautiful-dnd check the style of the Droppable to ensure it's got a valid animation that will trigger the animation event, and if not raise a debug error that says "you must have an animation on the draggable style" that will help future developers not hit this particular brick wall?