getting TypeError: Cannot add property sourceResource, object is not extensible when clicking on events

[bappyasif]

Check that this is really a bug

• I confirm

Reproduction link

https://github.com/bappyasif/food-recipes-with-nutrition/tree/drag-and-drop-failing-after-redux-based-state

Bug description

currently drag and drop functionality is not functioning for some reason, that is unknown to me, but previously it was....

when i was using "events" from this DndCalender component state variable, drag and drop was functioning but after starting to use redux based state management for handling "events" data its started to acting unpredictably and drag and drop functionality eventually was not happening!! rather only that error message was showing!!

Expected Behavior

to be able to "drag and drop" events within DnDCalender component

Actual Behavior

drag and drop is not happening but this typeError is showing up
EventWrapper._this.handleStartDragging (webpack-internal:///(app-pages-browser)/./node_modules/react-big-calendar/lib/addons/dragAndDrop/EventWrapper.js:51:38)

react-big-calendar version

1.6.4

React version

18.2.0

Platform/Target and Browser Versions

brave/chrome

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[AlexW29ChemE]

This issue is due to object mutation on the passed in events. The drag-and-drop wrapper is trying to add the "sourceResource" property to the selected event when attempting to move it. I assume redux marks any objects being added to the store as not extensible through the Object.preventExtensions() function to ensure immutability.

CodeSandbox

One solution is to just remap any objects being retrieved from the store so they are treated as new objects and the constraint is no longer applied.

const events = useSelector((state)=>state.event.items)
const remappedEvents = events.map((item) => ({ ...item }))

I do feel this may need to be changed in the library itself, as mutating props is not usually a reccommended approach, this is adding the "sourceResource" property to any passed in events only when that event is being moved which is quite unexpected and likely an unwanted side effect.

[moonbeam-dev]

@bappyasif @AlexW29ChemE Thank you for bringing this issue to light. I resolved this issue by creating a copy of the draganddrop subfolder code from the library, importing withDragAndDrop from the subfolder, and modifying the one line in the EventWrapper.js to create a copy of the prop using JSON.parse() and JSON.stringify() so the original prop is not mutated following this discussion on StackOverflow

Essentially, changed this one line from:
let extendedEvent = this.props.event
to:
let extendedEvent = JSON.parse(JSON.stringify(this.props.event))

If we are able to get some consensus around the validity of this solution (perhaps @basstager you could chime in as the author of the original code), then hopefully @cutterbl can approve PR #2475 to be merged 🙂

[basstager]

@moonbeam-dev Thanks for coming up with a solution. I think for fixing this issue it's fine and can be merged.
I also tested it and it works so hopefully @cutterbl could release it.