Lightning Web Components – Fix External JavaScript Library Issues in Experience Builder

experience-cloudjavascriptlightning-web-componentslwr

I have a LWR experience cloud site with Lightning Web Security Enabled.
My site is a set of questions on multiple pages with a progress bar on the bottom.
The transition from one page to another is controlled via a flow and each page is implemented as an LWC component contained within a Screen Flow element.

I use the loading bar js library (https://loading.io/progress/) to implement the progress bar.
I have followed the normal instructions of using a third party library

  • upload as static resource
  • use loadScript and then in the promise use the library.

After the loadScript's Promise is successful, I initialize the ldbar constructor as follows

                              "type" : "stroke",
                              "path" : "M0 72.5563C73 88.5563 188.5 104.056 442.5 61.0563C517 47.8896 683.806 23.0556 755 22.0563C897.5 20.0562 1139.5 72.0561 1303.5 66.5561C1433.64 62.1916 1466.5 47.0562 1509.5 36.0562",
                              "stroke":"data:ldbar/res,gradient(0,1,#7C66FF)",   
                               "bbox" : "0 17.500 1518.8 175"
                                   });

This all works fine if I create a lightning app and add my flow. The flow loads, the page loads and the progress bar also loads works.

However, when I use the same flow on Experience cloud, the loadScript succeeds but ldBar constructor fails with the message ldBar is not defined

I use another library (JustValidate) and that was the same issue. Loads and works when I am using it within app builder in Salesforce but loadScript succeeds but then JustValidate constructor fails.

Is their some security setting that I need to enable for the community for it to work? I have looked at all settings and none of them seem to be related to this.

Best Answer

I figured out the reason based on this documentation from Salesforce. (https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/template_limitations.htm)

Relevant section

Scripts loaded through lightning/platformResourceLoader run in an LWS sandbox. To use lightning/platformResourceLoader in an LWR site, you must implement your own loadScript function. See an example within codeSamples/resourceLoader in the code sample files.

TLDR; we need to implement our own load script function (based on the sample code provided).

Related Topic