[pdfjd-dist v4] Top-level await is not available

[TxcA]

Link PR: Update pdfjs-dist to 4.2.67 #111 Link Release: https://github.com/TaTo30/vue-pdf/releases/tag/v1.10.0

error log:

> npx vite --port=4000

  VITE v5.2.11  ready in 765 ms

  ➜  Local:   http://localhost:4000/
  ➜  Network: http://192.168.14.195:4000/
  ➜  press h + enter to show help
[vite-plugin-static-copy] Collected 1 items.
X [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    node_modules/pdfjs-dist/build/pdf.mjs:19764:53:
      19764 │ /******/ __webpack_exports__ = globalThis.pdfjsLib = await (globalThis.pdfjsLibPromise = __webpack_exports__);
            ╵                                                      ~~~~~

---

After upgrading to 1.10.0, the use of top await in pdfjs-dist v4+ caused compilation errors on my end. I tried downgrading to 1.9.7, which resolved the issue. Then, I used the @tato30/vue-pdf@1.10.0 + vite-plugin-top-level-await plugin to fix the error.

I submitted this issue in order to alert other users about how to resolve this problem.

[EiuaLee]

npm install vite-plugin-top-level-await -D

[kingcwt]

vite 配置 optimizeDeps: { esbuildOptions: { target: 'esnext', }, },

[lhiro]

try this

optimizeDeps: {
        include: ['pdfjs-dist'], // optionally specify dependency name
        esbuildOptions: {
            supported: {
                'top-level-await': true,
            },
        },
    },

[emargareten]

this is an issue with pdfjs and esbuild https://github.com/mozilla/pdf.js/issues/17245 https://github.com/evanw/esbuild/issues/253

[TxcA]

try this

optimizeDeps: {
        include: ['pdfjs-dist'], // optionally specify dependency name
        esbuildOptions: {
            supported: {
                'top-level-await': true,
            },
        },
    },

---

This method works during development, but yarn build still throws an error. Currently, we are still using the vite-plugin-top-level-await plugin to resolve this issue.

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

@lhiro Thanks~

[kuoruan]

try this

optimizeDeps: {
        include: ['pdfjs-dist'], // optionally specify dependency name
        esbuildOptions: {
            supported: {
                'top-level-await': true,
            },
        },
    },

This method works during development, but yarn build still throws an error. Currently, we are still using the vite-plugin-top-level-await plugin to resolve this issue.

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

@lhiro Thanks~

Try this, it's not recommend to change the build target, we just add top-level-await to support list

optimizeDeps: {
  esbuildOptions: {
    supported: {
      'top-level-await': true,
    },
  },
},
esbuild: {
  supported: {
    'top-level-await': true,
  },
},

[TxcA]

try this

optimizeDeps: {
        include: ['pdfjs-dist'], // optionally specify dependency name
        esbuildOptions: {
            supported: {
                'top-level-await': true,
            },
        },
    },

This method works during development, but still throws an error. Currently, we are still using the vite-plugin-top-level-await plugin to resolve this issue.yarn build

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

@lhiro Thanks~

Try this, it's not recommend to change the build target, we just add to support listtop-level-await

optimizeDeps: {
  esbuildOptions: {
    supported: {
      'top-level-await': true,
    },
  },
},
esbuild: {
  supported: {
    'top-level-await': true,
  },
},

---

🎉 @lhiro Thank you. After removing the vite-plugin-top-level-await plugin, I am now also able to run and build successfully.