bug: Rollup: Plugin Error: ./node_modules/pdfjs-dist/build/pdf.js:2614:2

[rahulgupta-dev]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

"@stencil/core": "^2.6.0"

Current Behavior

having issue when using "pdfjs-dist": "^3.0.279" in stencil component, getting below errors

Unexpected token (2614:2) in .\node_modules\pdfjs-dist\build\pdf.js (plugin: commonjs, transform)

below is my stencil component

import { Component, Element, h, Listen, Prop, State } from '@stencil/core'
import pdfjsLib from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

@Component({
  tag: 'pdf-viewer',
  styleUrl: 'pdf-viewer.scss'
})
export class PdfViewer {
  @Element() private element: HTMLElement
  @Prop() canvasWidth: number = 500
  @Prop() url: string = ''
  @State() currentPage: number = 1
  @State() totalPages: number
  @State() error: any = undefined
  private loadingTask = undefined

  constructor() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
    this.loadingTask = pdfjsLib.getDocument(this.url)
  }

  // Listen to the active page event emited in the toolbar component
  @Listen('activePageEvent')
  setActivePage(event: CustomEvent): void {
    this.currentPage = event.detail
  }

  renderPage(): void {
    this.loadingTask.promise
      .then(doc => {
        this.totalPages = doc.numPages
        doc.getPage(this.currentPage).then(page => {
          let viewport = page.getViewport({ scale: 1 })
          const desiredScale = this.canvasWidth / viewport.width
          viewport = page.getViewport({ scale: desiredScale, })
          const canvas: any = this.element.querySelector('#tt-pdf-widget')
          const context = canvas.getContext('2d')
          canvas.height = viewport.height
          canvas.width = this.canvasWidth || viewport.width
          const renderContext = {
            canvasContext: context,
            viewport: viewport
          }
          page.render(renderContext)
        })
      })
      .catch(e => {
        this.error = e
      })
  }

  componentDidLoad(): void {
    this.renderPage()
  }

  componentWillUpdate(): void {
    this.renderPage()
  }
  render() {
    return (
      <div class='pdf-viewer background'>
        <canvas id='tt-pdf-widget'></canvas>
      </div>
    )
  }
}

Expected Behavior

should not get the below error,

Unexpected token (2614:2) in .\node_modules\pdfjs-dist\build\pdf.js (plugin: commonjs, transform)

Steps to Reproduce

run npm install
run npm start

Code Reproduction URL

https://github.com/rahulgupta-dev/pdf-viewer

Additional Information

help if there is any issue in compiler/stencil/pdfjs versions

Node version: v18.12.0
Windows x86

[alicewriteswrongs]

Hello @rahulgupta-dev, thanks for filing this issue! I've just checked out your reproduction case (thank for providing that!) and confirmed that there is an issue at present.

I believe it has to do with the use of private class fields in the main file for pdfjs-dist (it's at node_modules/pdfjs-dist/build/pdf.js). The 'unexpected token' errors are pointing to line where private class fields are being used, like this:

class Foobar {
  #privateFoobar = "asdfasdfasdf";
}

I haven't confirmed this, but I believe that the current version of one of our Rollup plugins does not support this, so at present it won't be possible to use pdfjs-dist out-of-the-box.

However! The Mozilla team which distributes pdfjs does also build a 'legacy' version of the project which they describe thusly:

For usage with older browsers or environments, without support for modern features such as optional chaining, nullish coalescing, and private class fields/methods; please see the legacy/ folder.

I was able to get your reproduction to build by using that instead, by changing the import:

diff --git a/src/components/pdf-viewer/pdf-viewer.tsx b/src/components/pdf-viewer/pdf-viewer.tsx
index cdf407d..73aaefd 100644
--- a/src/components/pdf-viewer/pdf-viewer.tsx
+++ b/src/components/pdf-viewer/pdf-viewer.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, h, Listen, Prop, State } from '@stencil/core'
-import pdfjsLib from 'pdfjs-dist'
+import pdfjsLib from 'pdfjs-dist/legacy/build/pdf'
 import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

It does look like there's another issue with CORS, but having used pdfjs in the past I believe that is a pdfjs thing.

Anyway! I believe this will be fixed when we upgrade Rollup. I will label it for prioritization in our internal backlog now.

Thanks again for filing and for providing a reproduction!

[curiouscrusher]

Hello!

I just ran into this same issue with another module that is compiled with private class fields. Is this still not supported even in the current Stencil Core v4.7.0?

[johnjenkins]

Hey!
I think this should be fixed by #6187
Please let me know if you still experience any issues :)

[christian-bromann]

A fixed was published in https://github.com/stenciljs/core/releases/tag/v4.28.0 🎉