Uncaught SyntaxError: Unexpected token 'export' (at pdf.mjs:18148:10) with pdfjs-dist v4.0.379?

[lancejpollard]

I just had this working earlier today somehow, with pdfjs-dist in a Next.js 14 app router app. But it broke when I tried to deploy to vercel vercel/next.js#61549. So I upgraded to Next.js 14.11 canary, and got a different error with pdfjs-dist: vercel/next.js#61551 (Your target environment does not appear to support 'async/await').

It all boils down to this at the end of the pdfjs-dist/build/pdfjs.mjs file:

export { __webpack_exports__AbortException as AbortException, __webpack_exports__AnnotationEditorLayer as AnnotationEditorLayer, __webpack_exports__AnnotationEditorParamsType as AnnotationEditorParamsType, __webpack_exports__AnnotationEditorType as AnnotationEditorType, __webpack_exports__AnnotationEditorUIManager as AnnotationEditorUIManager, __webpack_exports__AnnotationLayer as AnnotationLayer, __webpack_exports__AnnotationMode as AnnotationMode, __webpack_exports__CMapCompressionType as CMapCompressionType, __webpack_exports__ColorPicker as ColorPicker, __webpack_exports__DOMSVGFactory as DOMSVGFactory, __webpack_exports__DrawLayer as DrawLayer, __webpack_exports__FeatureTest as FeatureTest, __webpack_exports__GlobalWorkerOptions as GlobalWorkerOptions, __webpack_exports__ImageKind as ImageKind, __webpack_exports__InvalidPDFException as InvalidPDFException, __webpack_exports__MissingPDFException as MissingPDFException, __webpack_exports__OPS as OPS, __webpack_exports__Outliner as Outliner, __webpack_exports__PDFDataRangeTransport as PDFDataRangeTransport, __webpack_exports__PDFDateString as PDFDateString, __webpack_exports__PDFWorker as PDFWorker, __webpack_exports__PasswordResponses as PasswordResponses, __webpack_exports__PermissionFlag as PermissionFlag, __webpack_exports__PixelsPerInch as PixelsPerInch, __webpack_exports__PromiseCapability as PromiseCapability, __webpack_exports__RenderingCancelledException as RenderingCancelledException, __webpack_exports__UnexpectedResponseException as UnexpectedResponseException, __webpack_exports__Util as Util, __webpack_exports__VerbosityLevel as VerbosityLevel, __webpack_exports__XfaLayer as XfaLayer, __webpack_exports__build as build, __webpack_exports__createValidAbsoluteUrl as createValidAbsoluteUrl, __webpack_exports__fetchData as fetchData, __webpack_exports__getDocument as getDocument, __webpack_exports__getFilenameFromUrl as getFilenameFromUrl, __webpack_exports__getPdfFilenameFromUrl as getPdfFilenameFromUrl, __webpack_exports__getXfaPageViewport as getXfaPageViewport, __webpack_exports__isDataScheme as isDataScheme, __webpack_exports__isPdfFile as isPdfFile, __webpack_exports__noContextMenu as noContextMenu, __webpack_exports__normalizeUnicode as normalizeUnicode, __webpack_exports__renderTextLayer as renderTextLayer, __webpack_exports__setLayerDimensions as setLayerDimensions, __webpack_exports__shadow as shadow, __webpack_exports__updateTextLayer as updateTextLayer, __webpack_exports__version as version };

That export isn't liked, and neither is the top-level await used throughout that file.

So how do I get this to work in the browser? I tried doing a simple <script src="/pdfjs/build/pdfjs.mjs"></script> straight in an HTML file, and I get that export error:

Any ideas of a workaround, or how I can get this going in other ways?

In Next.js specifically, I tried adding pdfjs-dist to the transpileModules config option, and used a node_modules transpiler for Next.js, but they both had no effect.

Eventually when try to dynamically import pdfjs-dist in my Next.js app, and call a function, I get this:

pdf.mjs:3733 Uncaught (in promise) Error: Setting up fake worker failed: "Failed to resolve module specifier "@swc/helpers/_/_class_private_field_get". Relative references must start with either "/", "./", or "../".".
    at eval (pdf.mjs:3733:36)

[gurpreet-hanjra]

Solved it. Ran into same issue.
Add type = "module" to let browser know to read it as module file. As the filename states - pdfjs.mjs

<script type="module" src="/pdfjs/build/pdfjs.mjs"></script>