ERROR: Top-level await is not available in the configured target environment

[x-wk]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

17349 │ /******/ __webpack_exports__ = globalThis.pdfjsLib = await (globalThis.pdfjsLibPromise = __webpack_exports__);


01:55:45 [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/pdfjs-dist/build/pdf.mjs:17349:53: ERROR: Top-level await is not available in the configured target environment ("chrome118.0", "edge118.0", "firefox115.0", "
ios16.0", "safari16.0" + 7 overrides)

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

@angular-devkit/architect       0.1602.10
@angular-devkit/build-angular   16.2.10
@angular-devkit/core            16.2.10
@angular-devkit/schematics      16.2.10
@angular/cli                    16.2.10
@schematics/angular             16.2.10
rxjs                            7.8.1
typescript                      4.9.5
zone.js                         0.13.3

Anything else?

No response

[JeanMeche]

Hi, do you use a custom browserlist ?

[x-wk]

Almost all default configurations

[JeanMeche]

can you give us the npx browserslist output ?

[x-wk]

Of course, as follows:
and_chr 119
and_ff 119
and_qq 13.1
and_uc 15.5
android 119
chrome 119
firefox 119
firefox 118
firefox 115
ios_saf 17.1
ios_saf 17.0
ios_saf 16.6-16.7
ios_saf 16.3
ios_saf 16.1
ios_saf 15.6-15.7
kaios 3.0-3.1
kaios 2.5
op_mini all
op_mob 73
opera 103
opera 102
safari 17.1
safari 17.0
safari 16.6
safari 15.6
samsung 23
samsung 22

[x-wk]

Exception information seen in the browser console:

core.mjs:10614  ERROR Error: Uncaught (in promise): TypeError: Failed to fetch dynamically imported module: http://localhost:4200/.angular/cache/16.2.10/vite/deps/pdfjs-dist.js?v=a9ded181
TypeError: Failed to fetch dynamically imported module: http://localhost:4200/.angular/cache/16.2.10/vite/deps/pdfjs-dist.js?v=a9ded181
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:10757:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10757:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:11070:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at _Zone.runTask (zone.js:173:47)

[clydin]

From the logs, it appears that the project is using the new build system with Angular v16. For v16, the build system was considered a developer preview and may not operate as expected in all cases. Please consider updating to Angular v17 where the new build system is now stable and fully supported.

If you are still encountering issues after using v17, please provide an updated version output as well as a minimal reproduction demonstrating the problem so that we can investigate further.

[x-wk]

@clydin Thank you for your reply, here is a demo:

https://stackblitz.com/edit/npfsyd

[alan-agius4]

This is expected as top level awaits are not supported.

Angular uses Zone.js which in requires always async/await to be downlevelled, in Esbuild this is done by enabling This is because we enable async/await downlevelling in esbuild which disables top level await usage.

Let's keep tracking this in #22191

[x-wk]

@alan-agius4 Thank you for your reply, as far as I know this vite plugin vite-plugin-top-level-await can handle this situation, where should I add this plugin?

[alan-agius4]

In this case adding the plugin in vite will only fix it it when running ng serve, however the application will not successfully build when running ng build.

[madurapa]

@alan-agius4 Thank you for your reply, as far as I know this vite plugin vite-plugin-top-level-await can handle this situation, where should I add this plugin?

You can see how to config the plugin here https://www.npmjs.com/package/vite-plugin-top-level-await

[madurapa]

For those who experience the same issue in the both dev and build commands, add the following

// vite.config.js
optimizeDeps: {
  esbuildOptions: {
    target: 'esnext'
  }
},
build: {
  target: 'esnext'
}

[pablopla]

@madurapa can you please share the complete config file. I'm not sure where to add optimizeDeps and build.

[alan-agius4]

The vite config is internal to the CLI and cannot be modified.

As stated before top level await is not supported.

[benbro]

@alan-agius4 topLevelAwait is enabled by default in Webpack but disabled in angular. Is there a chance you could enable it so we won't need custom webpack builder?

[alan-agius4]

@benbro, no, as that would cause the application not to be buildable if you decide to migrate to the esbuild based builders.

See #26507 (comment)

[madurapa]

@madurapa can you please share the complete config file. I'm not sure where to add optimizeDeps and build.

export default defineConfig({
    optimizeDeps: {
        esbuildOptions: {
            target: 'esnext'
        }
    },
    build: {
        target: 'esnext'
    },
});

Put your config if you find it difficult to edit, I can include those values and past here

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}