esbuild plugin error: Top-level await is not available in the configured target environment

[edbzn]

Describe the bug

Hi,

I'm trying out the new esbuild plugin with Angular, but I can't get it working. I'm facing this "top-level await is not available" issue when running the dev server. Does it come from the underlying esbuild config that Angular is using, or if it comes from something else? Any hint would be great.

Application bundle generation failed. [0.049 seconds]

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome124.0", "firefox125.0" + 5 overrides)

    container:remoteEntry:241:29:
      241 │     const createdContainer = await createContainer({
          ╵                              ~~~~~


✘ [ERROR] Build failed with 1 error:
error: The entry point "0" cannot be marked as external [plugin module-federation]

    container:remoteEntry:249:32:
      249 │       "get": async () => import('federationShare/0'),
          ╵                                 ~~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1145:14:
      1145 │         build.onLoad({
           ╵               ~~~~~~

    at Object.setup (/home/edouard/work/ng-rspack/node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1145:15)
    at /home/edouard/work/ng-rspack/node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1292:40
    at Array.forEach (<anonymous>)
    at setup (/home/edouard/work/ng-rspack/node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1292:15)
    at handlePlugins (/home/edouard/work/ng-rspack/node_modules/.pnpm/esbuild@0.20.1/node_modules/esbuild/lib/main.js:1293:21)


✘ [ERROR] Build failed with 1 error:
error: The entry point "1" cannot be marked as external [plugin module-federation]

    container:remoteEntry:261:32:
      261 │       "get": async () => import('federationShare/1'),
          ╵                                 ~~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1145:14:
      1145 │         build.onLoad({
           ╵               ~~~~~~

    at Object.setup (/home/edouard/work/ng-rspack/node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1145:15)
    at /home/edouard/work/ng-rspack/node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1292:40
    at Array.forEach (<anonymous>)
    at setup (/home/edouard/work/ng-rspack/node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1292:15)
    at handlePlugins (/home/edouard/work/ng-rspack/node_modules/.pnpm/esbuild@0.20.1/node_modules/esbuild/lib/main.js:1293:21)


✘ [ERROR] Build failed with 1 error:
error: The entry point "2" cannot be marked as external [plugin module-federation]

    container:remoteEntry:273:32:
      273 │       "get": async () => import('federationShare/2'),
          ╵                                 ~~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1145:14:
      1145 │         build.onLoad({
           ╵               ~~~~~~

    at Object.setup (/home/edouard/work/ng-rspack/node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1145:15)
    at /home/edouard/work/ng-rspack/node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1292:40
    at Array.forEach (<anonymous>)
    at setup (/home/edouard/work/ng-rspack/node_modules/.pnpm/@module-federation+esbuild@0.0.4/node_modules/@module-federation/esbuild/dist/plugin.cjs.js:1292:15)
    at handlePlugins (/home/edouard/work/ng-rspack/node_modules/.pnpm/esbuild@0.20.1/node_modules/esbuild/lib/main.js:1293:21)

Reproduction

Here's the repo I'm using and esbuild related changes:

edbzn/ng-rspack@main...esbuild

Used Package Manager

pnpm

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 22.12 GB / 30.98 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 20.13.1 - /usr/local/bin/node
    npm: 10.5.2 - /usr/local/bin/npm
    pnpm: 9.1.1 - /usr/local/bin/pnpm
    bun: 1.0.22 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 121.1.62.165
    Chrome: 121.0.6167.184

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[edbzn]

I investigated a bit and found that zone.js requires disabling top-level async/await (see this and this), to enable top-level async/await we need to install @angular/build@18.1.x and remove zone.js from polyfills.