Unable to load 3rd party lib in Lightning Web Component

Question

I'm trying to import a 3rd party javascript library from static resources in my lightning web component. I followed the exemple given in LWC documentation.

I encounter the folowing error :

Uncaught (in promise) TypeError: Cannot read property 'Symbol(ViewModel)' of undefined

Uncaught (in promise) TypeError: m is not a function

My sample code :

import loadScript from 'lightning/platformResourceLoader';
import fuse from '@salesforce/resourceUrl/fuse';

export default class SelectActivity extends LightningElement {

    fuseLoaded = false;

    renderedCallback() {
        if(!this.fuseLoaded){
            console.log(fuse);
            loadScript(this,fuse + "/fuse.js")
                .then( () => {
                    this.fuseLoaded = true;
                })
                .catch( error => console.log(error));

        }

    }
}

And my static resource is present :

Thank you in advance

Answer 1

You are passing a path variable in your loadScript call (/fuse.js) which is required when you want to load a file inside an archive When you upload the javascript file directly (which is the case based on your screenshot) you only pass the import identifier as 2nd argument

loadScript(this,fuse)

Answer 2

As said above, loadScript(this,fuse) should work fine.

Adding to it, you should not load script in renderedCallback as it will be invoked for every api/track variable change (unless it needs to like in case of graph where graph changes with every parameter change). You should be using connectedCallback instead.

Answer 3

I was able to solve this by removing the promise part from the loadScript. This below code only is enough as earlier answered by @salesforce-sas

loadScript(this,fuse)