LWC loadScript of Static Resource works on Local Development Server but not when deployed to Sandbox

Question

I used FullCalendar package to develop a rather simple LWC which includes a single DIV where the package dynamically loads it's elements.

<div id="calendar" lwc:dom="manual" class="fullcalendarjs"></div>

I developed the LWC using a Local Development Server (FullCalendar static resource was uploaded to a sandbox and then pulled into my project).

On the local server all is working perfectly, but when I deployed to the sandbox and tried displaying the LWC - I immediately hit an issue of accessing elements within the static resource (got an undefined value for them).

The loadScript promise resolves in both cases - however on the local server I get an event as a result and in the sandbox there's no event, the resolution is almost empty (not sure what does it mean - I'm not a JS expert).

Anyone ran into a similar issue? Any advice?

****** EDIT 01/09/2020*******

After some additional digging in the browser dev tools - I can clearly see that the resource is being loaded correctly - however - its path is different to the local server.

On the local server this is where my resource is located:

While on my Sandbox - the path is different:

On the local server I'm able to reference the FullCalendar var directly. When I try and do the same in the sandbox - it doesn't work and I get a FullCalendar is not defined error.

How should I address a var located in a different path?

Answer 1

I got some help from Salesforce on this, and that's what they responded:

As for accessing variable in the static resource, usually variables in static resources are private. In this case, you may need to attach the variable to the window object. For more details, please see: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_share_code.htm

This solved my issue, but it is a bit of a hack. Salesforce should be allowing importing ES6 modules, possibly loading them into static resources.

Answer 2

With regards to importing ES6 modules to LWC, I found this existing thread which discussed about 2 workaround options: Import ES modules in LWC

If you feel that the feature is useful to you, I would highly recommend you to post it in our IdeaExchange site to raise awareness to our Product Management for future release consideration: https://trailblazer.salesforce.com/ideaSearch

Hope that helps :)

Cheers, Aryne