getting TypeError: Cannot add property sourceResource, object is not extensible when clicking on events about react-big-calendar

[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 🙂