Importing pdf.mjs into app.js

ghenry

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.

8 comments

/phoenix #troubleshooting #liveview

0 7524 8

2023-11-28 20:58:56 UTC

Showing Posts 1 to 8

Show Best Posts
Show All (oldest first)
Show All (newest first)

ghenry

Actually:

https://caniuse.com/?search=top%20level%20await

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.

Post #1

ghenry

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

Post #2

ghenry

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.

Post #3

ghenry

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__;

Post #4

ghenry

It’s not me then:

https://github.com/mozilla/pdf.js/issues/17228

Post #5

ghenry

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

Post #6

Aduril

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?

Post #7