Top-level await is not available in configured environment

[timothyjlaurent]

I've cloned the repo and tried to develop withh gradio cc dev but I see this error:

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87",
"edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    frontend/node_modules/pdfjs-dist/build/pdf.mjs:19764:53:

      19764 │ ...s__ = globalThis.pdfjsLib = await (globalThis.pdfjsLibPromis...

            ╵                                ~~~~~

not sure what I'm doing wrong.

I'm on a mac with node 18.20.3

[freddyaboulton]

Hi @timothyjlaurent - did you run gradio cc install?

[timothyjlaurent]

Yes I did

[timothyjlaurent]

Here's complete output

$ python --version
Python 3.11.7

$ node --version
v18.20.3

$ rm -rf gradio-pdf

$ git clone https://github.com/freddyaboulton/gradio-pdf.git
Cloning into 'gradio-pdf'...
remote: Enumerating objects: 105, done.
remote: Counting objects: 100% (105/105), done.
remote: Compressing objects: 100% (73/73), done.
remote: Total 105 (delta 44), reused 70 (delta 22), pack-reused 0
Receiving objects: 100% (105/105), 1.24 MiB | 7.53 MiB/s, done.
Resolving deltas: 100% (44/44), done.

$ cd gradio-pdf

$ gradio cc install
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ 👷 Installing python... (/path/to/pip3 install -e .[dev])                                                                                                          │
│ ✅ Python install succeeded!                                                                                                                                       │
│ 👷 Installing javascript... (/path/to/npm install)                                                                                                                 │
│ ✅ NPM install succeeded!                                                                                                                                          │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

$ gradio cc dev
Traceback (most recent call last):
  File "/path/to/gradio-pdf/demo/app.py", line 3, in <module>
    from _app import demo as app
  File "/path/to/gradio-pdf/demo/_app.py", line 4, in <module>
    from pdf2image import convert_from_path
ModuleNotFoundError: No module named 'pdf2image'

$ pip install -r  demo/requirements.txt
[pip install output]

$ gradio cc dev
♻ Launching demo/app.py in reload mode

Watching: '/path/to/gradio-pdf/demo'
'/path/to/gradio-pdf/frontend',
'/path/to/gradio-pdf'

Hardware accelerator e.g. GPU is available in the environment, but no `device` argument is passed to the `Pipeline` object. Model will be on CPU.

Backend Server:  http://127.0.0.1:7860

Failed to resolve dependency: svelte/animate, present in 'optimizeDeps.include'
Failed to resolve dependency: svelte/easing, present in 'optimizeDeps.include'
Failed to resolve dependency: svelte/internal, present in 'optimizeDeps.include'
Failed to resolve dependency: svelte/internal/disclose-version, present in 'optimizeDeps.include'
Failed to resolve dependency: svelte/motion, present in 'optimizeDeps.include'
Failed to resolve dependency: svelte/store, present in 'optimizeDeps.include'
Failed to resolve dependency: svelte/transition, present in 'optimizeDeps.include'
Failed to resolve dependency: svelte, present in 'optimizeDeps.include'

Frontend Server (Go here): http://localhost:7861/

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    frontend/node_modules/pdfjs-dist/build/pdf.mjs:19764:53:
      19764 │ ...s__ = globalThis.pdfjsLib = await (globalThis.pdfjsLibPromis...
            ╵                                ~~~~~

3:10:37 PM  error while updating dependencies:
Error: Build failed with 1 error:
frontend/node_modules/pdfjs-dist/build/pdf.mjs:19764:53: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020",
"firefox78", "safari14" + 2 overrides)
    at failureErrorWithLog (/path/to/gradio-pdf/frontend/node_modules/vite/node_modules/esbuild/lib/main.js:1651:15)
    at /path/to/gradio-pdf/frontend/node_modules/vite/node_modules/esbuild/lib/main.js:1059:25
    at /path/to/gradio-pdf/frontend/node_modules/vite/node_modules/esbuild/lib/main.js:1527:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[timothyjlaurent]

OK so I removed the pinned pdfjs-dist and ran npm install pdfjs-dist. This fixed the loading problem but I was seeing,

Error: The API version "4.4.168" does not match the Worker version "4.2.67".

This led me to this issue https://github.com/mozilla/pdf.js/issues/17245

After trying several ways to get the worker loading from local install, this ended up working for me:

import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.mjs`;

[freddyaboulton]

Hi @timothyjlaurent - sorry for the delay here.

The easy fix is to modify @gradio/preview/dist/index.js and add the following lines to the await createServer call in the create_server function

      optimizeDeps: {
        esbuildOptions: {
          target: "esnext",
        }
      },

Will work with the gradio team to upstream this change. Will close though and once again thanks for the patience