Chart undefined in Digital Experience Site with Locker enabled

[amboton1]

What is affected by this bug?

Data Visualization - cannot display chart

When does this occur?

When compoent gets loaded.

We have this enabled in digital experience builder:

We have scripts for chart.js implemented inside staticresources.

Chart only works when locker is disabled.

Locker is enabled by default so this our issue might have important impact

[victorgz]

Hi @amboton1, we will need a bit more information to understand the problem:

1. Which version of the solution are you using? The managed package installed from the AppExchange or the Open Source repository directly deployed into your org?
2. Which type of component is causing the issue? The Chart Builder solution (drag & drop solution with configuration options), or a custom lwc component, using the lwcc API?
3. In case you're building a custom component, can you please share an example of your code so we can see how it is being implemented?

Thanks !

[amboton1]

Hi @victorgz , thank you for your quick response.

I cloned the project and then i just pushed the code to my scratch org for the test. Then after that i used Chart Builder (drag and drop) on Digital Experience Site Builder and set data source demo. The message was window.Chart not defined.

[amboton1]

I misspelled, its this error that i am getting after drag and dropping Chart Builder Component:

[victorgz]

Hi again @amboton1 ,

I am trying to figure out what's going wrong, because I have done some tests and for me it is working fine:

• I've created a new scratch org with a new partner community
• I've pushed the code of the master branch
• And finally dropped a new Chart Builder into the community
  

And for all of that, I haven't done any modifications on the Community Security Settings (so Lightning Locker is still active):

Some more questions to try to reproduce the problem:

• In which Salesforce release is your scratch org?
• What's your browser version?

@scolladon any other idea ?

[amboton1]

Hi @victorgz , we used "Build Your Own (LWR)" template where issue exist.

Now i've tried with a Partner Central Community and it works, without changing CSP(Locker).

So i would say the issue is in Build Your Own (LWR) template.

[victorgz]

@amboton1 exactly, I've checked and the issues comes from the Build Your Own (LWR) template.
This new template has some limitations, and one of them it is exactly about what you're mentioning above (link here):

Lightning Locker Limitations
LWR sites use an upgraded version of the Lightning Locker library, which currently includes some limitations.
Scripts loaded through lightning/platformResourceLoader run in system mode outside of a Lightning Locker sandbox. As a result, the component loading the script doesn’t have access to the same global variable scope as the script itself, preventing it from accessing any global variable set by the script.

The documentation proposes as a solution to implement a custom static resource loader, instead of using the standard Salesforce one. We're going to discuss this internally and see whether it is something that we could add to the current version or not.
In fact, we're already working on a new version of the project using ChartJS 3 which is available on an ES Module, so we won't need anymore the static resource (and therefore we won't have the problem with the BYO LWR template).

Meanwhile, I see two workarounds:

• You can just relax the Lightning Locker restriction in your current community
• Otherwise you can try to implement yourself the custom resourceLoader in the cloned repo, and keep the Lightning Locker enabled. And if you choose this option, we would love to hear any feedback from you ! 😄

[amboton1]

I am closing this issue for now.