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

[gouteru]

When I build my app with vue-pdf , I got the build error below. How can I solve the error?

VITE v5.0.11  ready in 495 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
X [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

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

C:\dev\Vue\examples\vue3app1\node_modules\esbuild\lib\main.js:1651
  let error = new Error(text);
              ^

Error: Build failed with 1 error:
node_modules/@tato30/vue-pdf/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 (C:\dev\Vue\examples\vue3app1\node_modules\esbuild\lib\main.js:1651:15)
    at C:\dev\Vue\examples\vue3app1\node_modules\esbuild\lib\main.js:1059:25
    at C:\dev\Vue\examples\vue3app1\node_modules\esbuild\lib\main.js:1527:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v18.17.0

package.json { "name": "vue3app2onsenui", "version": "0.0.0", "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "test:unit": "vitest", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore", "format": "prettier --write src/" }, "dependencies": { "@tato30/vue-pdf": "^1.10.0", "@vuepic/vue-datepicker": "^7.4.1", "@vueup/vue-quill": "^1.2.0", "firebase": "^9.23.0", "jssha": "^3.3.1", "onsenui": "^2.12.8", "pinia": "^2.1.7", "vue": "^3.3.11", "vue-onsenui": "^3.0.0", "vue-router": "^4.2.5" }, "devDependencies": { "@rushstack/eslint-patch": "^1.3.3", "@vitejs/plugin-vue": "^4.5.2", "@vue/eslint-config-prettier": "^8.0.0", "@vue/test-utils": "^2.4.3", "eslint": "^8.49.0", "eslint-plugin-vue": "^9.17.0", "jsdom": "^23.0.1", "prettier": "^3.0.3", "unplugin-auto-import": "^0.17.5", "unplugin-vue-components": "^0.26.0", "vite": "^5.0.10", "vitest": "^1.0.4" } }

[TaTo30]

That error comes from an update of pdfjs-dist that started to use await operator in top-level that is a "new" feature of ECMAScript. If you are aware about browser compatibility you could check it here (practically all browsers support it): https://caniuse.com/?search=top%20level%20await

The solution is set this config in your vite.config.ts:

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      supported: {
        'top-level-await': true,
      },
    },
  },
  plugins: [vue()],
})

[gouteru]

Thanks for prompt response, the error solved with adding the setting to vite.config.