2

Please note that I'm very new to SalesForce and LWC (barely a month into it).

If I look at the LWC Recipes where they demo D3.js and Chart.js, how can you make them load once globally? The goal is to use this external library in multiple pages of SalesForce, so how could we load the external library only once and not every time we visit a new page. Basically, I got an LWC Component working, it does load the external lib and everything is fine BUT I'm trying to avoid reloading this lib every single time (this external lib I have also requires jQuery which I have to reload every time), there about 5 loadScripts and some CSS with loadStyles, I'd be happy to have to do this only in 1 place.

I saw this SO answer which summarize how to deal with external library import but again it's only showing how to use it once but not really in a SPA fashion (single page app).

An example of Chart.js loaded as an external script, with this GitHub LWC Recipe

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import chartjs from '@salesforce/resourceUrl/chart';

export default class LibsChartjs extends LightningElement {
    error;
    chart;
    chartjsInitialized = false;

    renderedCallback() {
        if (this.chartjsInitialized) {
            return;
        }
        this.chartjsInitialized = true;

        loadScript(this, chartjs)
            .then(() => {
                const canvas = document.createElement('canvas');
                this.template.querySelector('div.chart').appendChild(canvas);
                const ctx = canvas.getContext('2d');
                this.chart = new window.Chart(ctx, this.config);
            })
            .catch(error => {
                this.error = error;
            });
    }
}

You might suggest to create an LWC Component and then use it as a Child Component, however in our use case we have issue with the external lib that we are trying to use and I had another SO Question. So I'm basically trying to avoid having issues with Child/Parent readonly object properties because that external lib uses pointer to update certain object properties.

I'm assuming that there must be a way to load the external lib into the window DOM object that can remain in this object and be available from any new LWC.

3

There is not a way to load scripts globally, nor would globally loading the script fix the problem. The main problem is that the Locker Service isolates data in different components from each other for security reasons. A globally loaded script could defeat that mechanism. The good news here, is that each script will be cached, so only one server trip is required no matter how many components use the script. The downside is that the script will still be limited to accessing the components from which it is loaded in to. Instead, you might want to flip this design around, and instead create a single component that loads these libraries, then performs operations based on input from the parent component. This is how components are designed to be used.

4
  • That is what I was afraid of, relying on the browser caching, not exactly how I wanted to go with. As for the creation of a single component that loads the external lib, well I think I just can't because of this other SO Question that I wrote on top. The external lib I use uses object pointer to update some properties in some areas and SalesForce doesn't like that since they block Child from updating a Parent which is what update by pointer does. – ghiscoding Mar 11 '20 at 18:02
  • @ghiscoding The browser doesn't (directly) do the caching, Aura does. This is automatic and part of the platform. As far as the data issue, you'd have to copy the data to the child component, then notify the parent via events. Or, you could use Aura, which does allow some two-way updates, but is kind of buggy, which is why LWC doesn't allow it. – sfdcfox Mar 11 '20 at 18:15
  • I feel so sad reading this. LWCs profoundly limit a modern development experience, yet they're supposed to be the "modern" tool. No other JS ecosystem has as many fundamental problems as LWCs. I hope Salesforce revisits how they work. – Andy Ray Jan 29 at 19:40
  • @AndyRay It's not LWC's fault; you can easily load global scripts in LWS OSS. It's more a matter of security controls that are (imho) a bit paranoid. – sfdcfox Jan 29 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.