capi & vite dev mode: Top-level await is not available

[karl-kallavus]

For "capi": "0.1.0-beta.26" there's an error after pnpm run dev

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

    node_modules/.pnpm/capi@0.1.0-beta.26/node_modules/capi/esm/deps_2/raw.githubusercontent.com/paritytech/capi-crypto-wrappers/14289c5/lib.js:2:0:
      2 │ await wasm.instantiate();
        ╵ ~~~~~

Possible solutions:

• workaround through the plugin https://www.npmjs.com/package/vite-plugin-top-level-await (it works)
• fix in capi Top-level await is not available for vite dev mode capi#707

[statictype]

seems like the problem is in fact that Vite is not respecting the build target we set in the config

the plugin you suggested is only for when you don't want to set esnext as build target in Vite as mentioned in the docs:

Support all modern browsers of Vite's default target without need to set build.target to esnext.

Capi seems to use pretty recent targets, it should support top level await.

[karl-kallavus]

@statictype Top-level await expressions are only allowed when the module option is set to es2022

It seems like capi uses target: "ES2021"
https://github.com/paritytech/capi/blob/main/_tasks/dnt.ts#L21

I'll try to dnt capi using esnext/es2022/latest locally

Issue is related to dependency capi-crypto-wrappers

[karl-kallavus]

Target: "ES2021" works fine as well.

So it's seems you're right @statictype

[karl-kallavus]

Pasting here a workaround from @tjjfvi just in case we need it in future

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact(), tsConfigPaths()],
  build: {
    target: "es2022",
  },
  optimizeDeps: {
    esbuildOptions: {
      target: "es2022",
    },
  },
});