Illegal invocation at elementClosest fullcalendar v4.3.1

Question

I'm using fullcalendar library v4.3.1 inside a Salesforce LWC. All was working good in sandbox until I clicked inside an event and I get the following error:

aura_prod.js:999 Uncaught TypeError: Illegal invocation
throws at https://mybts--partial.sandbox.my.site.com/....../fullcalendar/packages/core/main.js:126:30 TypeError: Illegal invocation
    at elementClosest (main.js:126:30)
    at DateComponent.isValidDateDownEl (main.js:4070:25)
    at DateClicking._this.handlePointerDown (main.js:1128:57)
    at applyAll (main.js:988:36)
    at EmitterMixin.triggerWith (main.js:3523:17)
    at EmitterMixin.trigger (main.js:3518:18)
    at HitDragging.handlePointerDown (main.js:988:35)
    at applyAll (main.js:988:36)
    at EmitterMixin.triggerWith (main.js:3523:17)
    at EmitterMixin.trigger (main.js:3518:18)

I've tried many times what I've found on other threads (for example: https://github.com/fullcalendar/fullcalendar/issues/4990). Many people has shared this solution:

At core/main.js line 126 change this:

function elementClosest(el, selector) {
  return closestMethod.call(el, selector);
}

To this:

function elementClosest(el, selector) {
 return el.closest(selector);
}

But that solution doesn't work for me. As I upload the library to the static resource with that change I get a loaded error and the fullcalendar library is not loaded as it can load the core/main.js.

I've tried also with other versions and I don't make it work. Anyone can assist?

Change from a version to another.

Answer 1

SOLUTION: I’ve managed to get this works. I just realised I was not setting the path static source correctly.

I confirm this solution works for the fullcalendar library inside a lwc.

Change to this at line 126 of core/main.js:

function elementClosest(el, selector) {
 return el.closest(selector);
}

Then, you’ll probably have to do the same with function elementMatches() just below function elementClosest(). I had to do it and it worked:

Change this:

function elementMatches(el, selector) {
 return matchesMethod.call(el, selector);
}

To this:

function elementMatches(el, selector) {
 return el.matches(selector);
}

Answer 2

Using the library with no changes, but enabling the Lightning Web Security Worked for my:

Setup > Session Settings > Lightning Web Security > Use Lightning Web Security for Lightning web components and Aura components

IMPORTANT!! Enabling this option may impact in other components or functionalities of your org, so is much better if you make a full regresion test in your sandbox.

enter image description here