Top-level async error: await isn't allowed in non-async function

[the-wc]

Attach (recommended) or Link to PDF file here:

// Chrome Extension Background Worker

// Wrapping this in the below function as a dynamic import also causes an error.
import * as pdfjsLib from "pdfjs-dist" 

async function example(url: string) {
    // These functions work fine if you remove the error-causing code.
    const response = await fetch(url)
    const arrayBuffer = await response.arrayBuffer()
    // This causes the error
    const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer })
}

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.url) {
    // You can remove the await here btw - throws same error.
    await example(message.url)
  }
})

Configuration:

• Web browser and its version: Ubuntu 22.04.3 LTS
• Operating system and its version: Version 119.0.6045.159 (Official Build) (64-bit)
• PDF.js version: 4.0.269
• Is a browser extension: Yes

Steps to reproduce the problem:

1. Initialize Chrome extension
2. Download pdfjs-dist
3. Import a function from pdfjs-dist in your background worker
4. Call that function within an async function

What is the expected behavior? (add screenshot)

Importable pdfjs functions within async functions

What went wrong? (add screenshot)

  × await isn't allowed in non-async function
       ╭─[16309:1]
 16309 │ /\*\*\*\*\*\*/ // Load entry module and return exports
 16310 │ /\*\*\*\*\*\*/ // This entry module used 'module' so it can't be inlined
 16311 │ /\*\*\*\*\*\*/ var \_\_webpack\_exports\_\_ = \_\_webpack\_require\_\_(907);
 16312 │ /\*\*\*\*\*\*/ \_\_webpack\_exports\_\_ = globalThis.pdfjsLib = await (globalThis.pdfjsLibPromise = \_\_webpack\_exports\_\_);
       ·                                                            ─
 16313 │ /\*\*\*\*\*\*/ var \_\_webpack\_exports\_\_AbortException = \_\_webpack\_exports\_\_.AbortException;
 16314 │ /\*\*\*\*\*\*/ var \_\_webpack\_exports\_\_AnnotationEditorLayer = \_\_webpack\_exports\_\_.AnnotationEditorLayer;
 16315 │ /\*\*\*\*\*\*/ var \_\_webpack\_exports\_\_AnnotationEditorParamsType = \_\_webpack\_exports\_\_.AnnotationEditorParamsType;
       ╰────

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

• Using PlasmoHQ for builds
• I've seen a variant of this error on the same lines already appear here: pdf_viewer broken in 4.0.189 when using Webpack #17228 (comment)

[Snuffleupagus]

Unfortunately this does sound like a limitation/problem of the particular environment used, rather than a PDF.js library bug, however this isn't really actionable as-is.

Please see https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md (emphasis mine):

If you are developing a custom solution, first check the examples at https://github.com/mozilla/pdf.js#learning and search existing issues. If this does not help, please prepare a short well-documented example that demonstrates the problem and make it accessible online on your website, JS Bin, GitHub, etc. before opening a new issue or contacting us in the Matrix room -- keep in mind that just code snippets won't help us troubleshoot the problem.

[wojtekmaj]

This also breaks PDF.js in Vite, unless the following config is added:

  build: {
    target: 'es2022',
  },
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2022',
    },
  },

so, on Vite at least, this makes PDF.js unusable anywhere but on rather bleeding edge environments, unfortunately.

[Snuffleupagus]

If you'd like to see a future version of the PDF.js library without top level await, please see #17245 (comment).