Top level await makes it difficult to target support for older browser versions

[rakshithjk-clumio]

Versions

• originjs: 1.1.3
• node: v14.19.0

The plugin makes use of top level await to get the remote modules. This conflicts with setting build targets anything apart from esnext

Are there any workarounds for this?

[ruleeeer]

This might be one of the issues to consider, maybe try using then instead of top-level await, but I'm not sure if that would cause some weird problems

[matrunchyk]

Having the same issue when I try to use terser instead of esbuild. I had to disable this plugin infortunately, while keeping subscribed to this thread.

[vecpeng]

Having the same issue, is there any progress there?

[flyfishzy]

There are currently 2 solutions. First, you can set the build.target to specified browsers.

build: {
    target: ["chrome89", "edge89", "firefox89", "safari15"],
  },

Another option is use plugin vite-plugin-top-level-await .

import federation from '@originjs/vite-plugin-federation'
import topLevelAwait from 'vite-plugin-top-level-await'

export default defineConfig({
  plugins: [
    federation({
 ...
       }),
    topLevelAwait({
      // The export name of top-level await promise for each chunk module
      promiseExportName: '__tla',
      // The function to generate import names of top-level await promise in each chunk module
      promiseImportName: i => `__tla_${i}`
    })
  ],
  build: {
    target:"es2015"
  }
})

[ruleeeer]

Since the solution already exists, close

[echjordan0]

It seems this issue is not resolved in v 1.1.6. I am able to shim top level await but with build target es2015 I get the following error and the styles for my remote are indeed not applied.

The remote style takes effect only when the build.target option in the vite.config.ts file is higher than that of "es2020".
(anonymous) @ instrument.js:111
d @ remoteEntry.js:1
./microfrontend @ remoteEntry.js:1
h @ remoteEntry.js:1
(anonymous) @ routes.ts:797

Is it possible to use this plugin with a build target below es2020?