Console error when trying to load PDF file in LWC using pdf.js

Question

I'm trying to display a pdf in Lightning web component and i'm getting the below error in console.Not able to understand the root cause.I'm importing pdf.js and pdf.worker.js files.

  import { LightningElement} from 'lwc';
  import PDFJS from '@salesforce/resourceUrl/pdfJS';
  import PDFWORKER from '@salesforce/resourceUrl/pdfWorker'
  import { loadStyle,  loadScript } from 'lightning/platformResourceLoader';
  
  export default class pDFfilePreviewer extends LightningElement {
    urls = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
    pdfjsvar;
    connectedCallback() {
      Promise.all([
        loadScript(this, PDFJS),
        loadScript(this, PDFWORKER),
      ]).then(() => {
        console.log('PDF JS loaded');
        pdfjsLib.GlobalWorkerOptions.workerSrc = PDFWORKER;
        this.pdfjsvar = pdfjsLib;
      }).catch((error) => {
        console.log(' Error loading scripts ' + error);
      })
    }
    handleClick(event) {
      this.showPdf(this.pdfjsvar);
    }

    showPdf(pdfjsLib) {
      console.log('PDF JS loaded' + JSON.stringify(pdfjsLib));
      var pdfData = atob(
        'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
        'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
        'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
        'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
        'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
        'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
        'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
        'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
        'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
        'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
        'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
        'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
        'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
      var loadingTask = pdfjsLib.getDocument({
        data: pdfData
      });
      var canvas = this.template.querySelector('canvas.secondclass');
      var ctx = canvas.getContext('2d');
      loadingTask.promise.then(function(pdf) {
        pdf.getPage(1).then(function(page) {
          var scale = 1.5;
          var viewport = page.getViewport({
            scale: scale
          });
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          var renderContext = {
            canvasContext: ctx,
            viewport: viewport
          };

          page.render(renderContext).then(function() {
            alert("Working");
          });
        });
      }, function(reason) {
        console.error(reason);
      });
    }
  }

Answer 1

Workers are not supported in Lightning (see the Locker API Viewer). I see it says that it set up a fake worker, but I suspect that is the source of your problem. Use the normal API instead of the worker API, and that should resolve your problem.