Load third party JS in LWC

Question

I created a static resource with just one JS file. However when component rendered it gives me an error "undefined".

Template:

<!-- videoPlayer.html -->
<template>
    <div class="fancy-border">
        <video autoplay>           
        </video>
    </div>   

</template>

Controller:

/* eslint-disable no-console */
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import instascan from '@salesforce/resourceUrl/instascan';

export default class VideoPlayer extends LightningElement {
    instaInitialized = false;

    renderedCallback() {
        if(!this.instaInitialized){
            // eslint-disable-next-line no-console
            console.log(instascan);
            loadScript(this,instascan)
                .then( () => {
                    this.instaInitialized = true;
                })
                .catch( error => console.log(error));

        }

    }

    initializeD3() {
        const player = this.template.querySelector('video');

    }

}

Static Resource:

Error:

Answer 1

Error is undefined when the script is not found.

The only way I got this to work is to put the javascript file into a zip file. Next on the loadScript function you pass the path to the file like this (change the string if you are using subfolders).

loadScript(this, instascan + '/instascan.js'

Answer 2

loadScript function needs the path to your js as the second argument. Your code above does not specify that.

See documentation https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-resource-loader/documentation