How to access loaded script in Salesforce Lightning Web Component?

Question

When loading an external library in a Lightning Web Component, I can't seem to access the actual script. Instead, I can only find the reference to the static resource by checking the resolved import string.

phone.js:

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import JsSIP from '@salesforce/resourceUrl/jssip';
// import * as JsSIP from 'jssip';

export default class Phone extends LightningElement 
{
    ...
    async connectedCallback() {
        console.log(JsSIP); // This resolves to the static resource location inside the connected org in a string.

        loadScript(this, JsSIP + '/jssip.js')
            .then(() => { 
                console.log(JsSIP.version); // This is only accessing the resource reference, not the actual script; so result is *undefined*. 
    ...
}

So my question is: "How to access the loaded script instead of the resource reference?".

I've followed the guides here and here and found this GitHub issue that seems to be dealing with the same referencing problem. The solution however is not apparent for my specific case.

Any help with this would be much appreciated!

score 0 · Accepted Answer · answered Jul 21 '21 at 17:26

I think your library creates a "global" object called JsSIP once it finishes loading. And the name clashes with the name for the file reference. Can you name it import jssip or jsSipLibrary or something and see what happens?

Put debugger; statement into then and enable debugging in Setup -> debug mode. Open the page with browser's console (F12 most of the time)

How to access loaded script in Salesforce Lightning Web Component?

1 Answers1