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 7701 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

ghenry

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

Post #8

— All posts loaded —

Where Next?

View thread on forum (has 8 replies!)

phoenix

troubleshooting

liveview

Home Questions & Help>Questions

0 7389 8

Last post

REPLY VIEW THREAD WITH 8 POSTS

Trending in Questions

Questions & Help>Questions

Programming Phoenix chat example - iPhone lack of socket updates

I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...

/phoenix #troubleshooting

1 950 6

2026-09-02 14:38:57 UTC

New

Questions & Help>Questions

What's the approach for handling lists that allows for optimized traversal?

Hello, I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...

#learning-elixir #list

13 419 15

2026-09-07 22:04:33 UTC

New

Questions & Help>Questions

Scoped Routes section of the Phoenix guides refers to a problem without explaining what it is ("but there is a problem")

Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...

/phoenix

6 829 4

2026-09-14 19:21:20 UTC

New

Questions & Help>Questions

"Mentoring" match maker? maybe MVP

Hi everyone, I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding. I sta...

#helpers #programming

8 940 4

2026-09-15 12:38:51 UTC

New

Questions & Help>Questions

`:erlang.float` vs `value * 1.0`: Which is the prefered way?

So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...

#learning-elixir

12 638 5

2026-09-09 07:37:20 UTC

New

Questions & Help>Questions

Why is Logger's default level :debug?

I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...

#logging #logger

13 504 10

2026-09-14 17:03:40 UTC

New

Questions & Help>Questions

Vscode elixirLS setup - want to fix/understand "couldn't create connection to server"

I’m new to elixir and just tried to install the elixirLS extension for VScode(ium) and it is throwing some errors that I would like help ...

#learning-elixir #vscode #elixir-ls

0 144 3

2026-09-07 12:51:22 UTC

New

Other Trending Topics

News>Announcing

Mob - Native BEAM / Elixir on Native Mobile

Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...

/mob #library #beam #mobile #liveview #react-native #mobile-app #mobile-development

259 8139 110

2026-09-20 11:24:18 UTC

New

News>Announcing

Dexter - A fast, full-featured Elixir LSP optimized for large codebases

Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...

#library #lsp #dexter

187 6988 64

2026-09-14 12:13:06 UTC

New

Chat & Discussions>Discussions

Cure - a new language compiled to BEAM

I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...

#static-types #type-checking #types #fsm

171 6315 70

2026-09-17 05:43:05 UTC

New

News>Announcing

Hobbes - a low-level distributed database for the Elixir programming language

Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...

#library #database #distributed #hobbes

304 6056 88

2026-09-21 08:07:37 UTC

New

News>Announcing

Gust - A task orchestration system built in Elixir

Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...

/phoenix /oban #library #workflow #background_job #reactor

111 4469 40

2026-09-02 17:48:18 UTC

New

Chat & Discussions>Discussions

Expert LSP is now available!

Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...

#lsp #expert

220 4348 38

2026-09-14 02:15:50 UTC

New

Importing pdf.mjs into app.js

ghenry

Showing Posts 1 to 8

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

ghenry

ghenry

ghenry

ghenry

ghenry

ghenry

Aduril

ghenry

Where Next?

Trending in Questions

Programming Phoenix chat example - iPhone lack of socket updates

What's the approach for handling lists that allows for optimized traversal?

Scoped Routes section of the Phoenix guides refers to a problem without explaining what it is ("but there is a problem")

"Mentoring" match maker? maybe MVP

`:erlang.float` vs `value * 1.0`: Which is the prefered way?

Why is Logger's default level :debug?

Vscode elixirLS setup - want to fix/understand "couldn't create connection to server"

Other Trending Topics

Mob - Native BEAM / Elixir on Native Mobile

Dexter - A fast, full-featured Elixir LSP optimized for large codebases

Cure - a new language compiled to BEAM

Hobbes - a low-level distributed database for the Elixir programming language

Gust - A task orchestration system built in Elixir

Expert LSP is now available!

Latest Phoenix Threads

Questions & Help>Questions

Latest on Elixir Forum

Categories:

Sub Categories:

Forums

Popular Tags

We're in Beta

Options

Thread Display Mode

Thread Preview

Importing pdf.mjs into app.js

ghenry

Showing Posts 1 to 8 Show Best PostsShow All (oldest first)Show All (newest first)

ghenry

ghenry

ghenry

ghenry

ghenry

ghenry

Aduril

ghenry

Where Next?

Trending in Questions

Programming Phoenix chat example - iPhone lack of socket updates

What's the approach for handling lists that allows for optimized traversal?

Scoped Routes section of the Phoenix guides refers to a problem without explaining what it is ("but there is a problem")

"Mentoring" match maker? maybe MVP

`:erlang.float` vs `value * 1.0`: Which is the prefered way?

Why is Logger's default level :debug?

Vscode elixirLS setup - want to fix/understand "couldn't create connection to server"

Other Trending Topics

Mob - Native BEAM / Elixir on Native Mobile

Dexter - A fast, full-featured Elixir LSP optimized for large codebases

Cure - a new language compiled to BEAM

Hobbes - a low-level distributed database for the Elixir programming language

Gust - A task orchestration system built in Elixir

Expert LSP is now available!

Latest Phoenix Threads

Questions & Help>Questions

Latest on Elixir Forum

Sponsor Spotlight

Our Sponsors

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

We're in Beta

Options

Thread Display Mode

Thread Preview

Showing Posts 1 to 8

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