Import PDF.js into an LWC

Question

I've uploaded a minified pdf.js file (CDN link) into a static resource, but when trying to use it, pdfjsLib is undefined no matter what I try. It was my unstanding that pdfjsLib would be defined and exported in the imported script file, and that Salesforce would attach the export onto the window object. What is possibly going wrong here?

import { LightningElement, api } from 'lwc'
import { loadScript } from 'lightning/platformResourceLoader'
import pdfjs from '@salesforce/resourceUrl/pdfjs'

export default class PdfRender extends LightningElement {

    async renderedCallback() {
        try {
            await loadScript(this, pdfjs)
            console.log(window.pdfjsLib) // undefined
        } catch (e) {
            console.error('There was an issue loading PDF.js: ' + e.message)
        }
    }
 }

Answer 1

Try loading the static resource in the connectedCallback method?

If that doesn't work try with resource loader.

Create a resource loader component (resourceLoader)

/**
 * Utility function to load a JS file via a script tag.
 * @param {String} url - The path to the JS file.
 * @return {Promise} - A promise resolved once the JS file has been loaded.
 */
export function loadScript(url) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.charset = 'utf-8';
        script.type = 'text/javascript';
        document.head.appendChild(script);
        script.addEventListener('load', resolve);
        script.addEventListener('error', reject);
    })
}

Import resourceLoader and load static resource in your lwc.

import { loadScript } from 'c/resourceLoader';
                    
connectedCallback(){
    Promise.all([
                //You may have to tweak the following url, try opening the final url in your browser and see if the file loads
                loadScript('/resource/'+yourresourceid+'/something.js')
            ]).then(()=>{

        //Do something after loading your script
    });
}