Importing pdf.mjs into app.js

Questions / Help
, ,
1

Hi all,

I’m trying to use pdf.js and importing it like so:

import PDFJS from "../vendor/pdf.mjs"

so I can use it in a Hook to render the 1st page of a PDF, but I’m getting:

✘ [ERROR] Top-level await is not available in the configured target environment ("es2018")

    vendor/pdf.mjs:16837:53:
      16837 │ ...ck_exports__ = globalThis.pdfjsLib = await __webpack_exports__;
            ╵                                         ~~~~~

I’ve tried incrementing the es version in config.exs to no avail.

Anyone else using .mjs files? They are from https://github.com/mozilla/pdf.js/releases/download/v4.0.189/pdfjs-4.0.189-dist.zip

Thanks.

2

Actually:

es2022 is OK and now giving me:

✘ [ERROR] Top-level await is currently not supported with the "iife" output format

    vendor/pdf.mjs:16837:53:
      16837 │ ...ck_exports__ = globalThis.pdfjsLib = await __webpack_exports__;
            ╵                                         ~~~~~

so I don’t think I’m doing this right.

3

I think I’ll do it this way via npm How can I implement pdfjs in liveview? - #7 by knoebber

4

Aww, man. Exactly the same installed using npm:

import pdfJS from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker';


....

[watch] build started (change: "js/pdf_preview/index.js")
✘ [ERROR] Could not resolve "pdfjs-dist/build/pdf.worker"

    js/pdf_preview/index.js:3:7:
      3 │ import 'pdfjs-dist/build/pdf.worker';
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "pdfjs-dist/build/pdf.worker" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Top-level await is not available in the configured target environment ("es2017")

    node_modules/pdfjs-dist/build/pdf.mjs:16837:53:
      16837 │ ...ck_exports__ = globalThis.pdfjsLib = await __webpack_exports__;

I guess this IS a js thing then.

5

worker issue resolved with:

import 'pdfjs-dist/build/pdf.worker.mjs';

but switching to es2022, give same as before:

[watch] build started (change: "js/pdf_preview/index.js")
✘ [ERROR] Top-level await is currently not supported with the "iife" output format

    node_modules/pdfjs-dist/build/pdf.mjs:16837:53:
      16837 │ ...ck_exports__ = globalThis.pdfjsLib = await __webpack_exports__;
6

It’s not me then:

7

Issue being tracked here for those that hit this later. 4.0.189: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides) · Issue #17245 · mozilla/pdf.js · GitHub

8

Hey @ghenry ,
Me and my colleagues are having the same issue. If I read that github issue correctly they solve that by using vite.
Do you (or anybody else) have a working example with phoenix? Or did you just simply used a different release?

9

I kept with v3, but my github dependabot upgraded it to v4 and it still seemed to work. I’m watching that issue though.