1

I have trouble loading the PDF.js library in my Lightning Web Component. Whenever I load the page with the component, I get :

PDF.js could not be loaded undefined

Twice, this additional error popped up in Edge:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

Firefox prints the latter error a bit differently and also specifies the path of the module, for example: https://myOrg.lightning.force.com/resource/pdfjs/build/pdf.mjs

Here is the code I am using to load the library:

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

export default class LinkField extends LightningElement {
    
connectedCallback(){
        Promise.all([ loadScript(this, pdfjs) ]).then(()=>{ console.log('loaded'); })
              .catch(error=>{ console.error("PDF.js could not be loaded " + error); });
    }
...

And a screenshot of my static resource: Static resource page

Since I am not able to find proper documentation on how to load or use libraries/static resources in LWC, even just a pointer to some documentation or appropriate coding examples, would be appreciated.

Edit

After changing to the older version V3.11.174 of PDF.js, which contains .js instead of .mjs files, the previously stated MIME type errors disappeared and the pdf viewer I put into an iframe is not completely without function anymore. I am still unable to load the scripts of the library however and continue to receive the same error:

PDF.js could not be loaded undefined

This also continuous to happen when I specifiy the paths to the individual .js files, like so:

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

export default class LinkField extends LightningElement {

connectedCallback(){
        Promise.all([ loadScript(this, pdfjs + "/build/pdf.js") ])
            .then(()=>{ console.log('loaded'); })
            .catch(error=>{ console.error("PDF.js could not be loaded " + error); });
    }
...

1 Answer 1

2

When you do loadScript you need to point it to the .js file in your static resource, not just the folder name.

For example, instead of loadScript(this, pdfjs), you need to do loadScript(this, pdfjs + "/build/pdf.js"). (Refer to the static resource to get the correct file name)

There is some documentation for this: Use Third-Party JavaScript Libraries

Also, when catching a Javascript error, you should do error.message to get the error message.

8
  • When I try to use loadScript(this, pdfjs + "/build/pdf.mjs") I am still getting the same errors. Could it be because of the file type?
    – Domovyak
    Commented Nov 9, 2023 at 14:42
  • Is there a .js file you can use? The version of pdfjs I looked at had /build/pdf.js
    – fred
    Commented Nov 9, 2023 at 14:58
  • I found V3.11.174 of PDF.js, which still uses .js files. While the MIME type errors disappeared, I am still unable to load individual files from the library.
    – Domovyak
    Commented Nov 10, 2023 at 9:33
  • Update your question with the code you are using to do this
    – fred
    Commented Nov 10, 2023 at 11:13
  • 1
    When I use error.message, loadScript is successful for me. There are other problems I am now facing, but I am thankful for your help.
    – Domovyak
    Commented Nov 13, 2023 at 14:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .