Not working if targets are specified also in esbuild.target under vite.config.ts

[p0358]

You can specify the targets under vite config in both places like so:

export default defineConfig({
    plugins: [vue(), topLevelAwait()],
    build: {
        target: ["chrome102", "safari13"],
    },
    esbuild: {
        target: ["chrome102", "safari13"]
    },
});

The issue is, this plugin seems to fail if esbuild.target is specified. Removing this and having just build.target makes it work. However in my case having no esbuild.target seems to make the dev server not transpile things for the target, which is the reason I originally explicitly also added that option to my config.

Is there a way to make this plugin work properly with that option specified, but also without breaking transpilation in dev server with HMR?

[Menci]

You mustn't specify "safari13" since Safari's top-level await supports starts from 15. You don't need to enable transpile in dev server since the latest browsers support all language features that Vite's dev server outputs.

[p0358]

You don't need to enable transpile in dev server since the latest browsers support all language features that Vite's dev server outputs.

Sadly I actually need to, because I'm developping for an embedded browser that's not yet updated above the featureset level of Safari 13.1 and it contains specific JS bindings that cannot be mocked too easily outside of it. I guess it's a somewhat specific situation.

But I now understand the error there comes from ESBuild itself and as such there probably isn't an easy way to make it ignore the top-level await itself so that this plugin could then convert it, because I think that's how it works there.

But thankfully in my case I managed to solve the issue by recoding the function in top-level to be synchronous, so I guess it doesn't matter for me anymore...

[Menci]

You should use a modern browser for development. And validate the built bundle in your target browser.