Why isn't Vite target: 'esnext' used by default?

[garretwilson]

I had a problem trying to use a top-level await in the background script. The helpful AI chatbot told me I need to switch from IIFE modules to ES modules. (I was curious as to why I wasn't using modern modules already, and the AI chatbot told me it was because MV2 doesn't support them, and by default Firefox is configured to use MV2.)

I followed the AI chatbot directions and added type: "module" to my background script. That led me to another error:

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

The AI chatbot told me the next steps of adding esnext here and there. I looked and ./.wxt/tsconfig.json is already configured for esnext:

    "target": "ESNext",
    "module": "ESNext",

What was missing was the Vite configuration; again following the AI chatbot recommendation, I added the following to wxt.config.ts:

export default defineConfig({
  vite: () => ({
    build: {
      target: "esnext",
    },
  }),

So the question is: Why doesn't WXT configure Vite to use esnext by default, since ./.wxt/tsconfig.json apparently is defaulting to esnext?

[garretwilson]

The AI chatbot tried to answer this question, but really didn't provide a satisfactory reason:

Even though the default tsconfig.json in WXT sets target and module to ESNext, Vite’s default build target might be more restrictive to ensure compatibility with a broader range of environments. …

So I guess it's to make sure really old browsers are targeted maybe? This Vite might be something to add to the docs.

And wouldn't you know it, when I asked the AI chatbot, it actually said:

Would you like to contribute this to the documentation by submitting a PR?

🤦‍♂️ These AI chatbots are getting a little too well-trained. 😬

[garretwilson]

Top-level await doesn't seem to work in Chrome in the background service worker anyway for some reason.

Besides even if I take out the top-level await, the main: async () => is causing this console message:

The background's main() function return a promise, but it must be synchronous

So maybe I'll just back out of all these esnext changes and forget top-level await for now.

[amitbeck]

I also ran into this exact issue. Ended up trying a different approach that doesn't involve using top-level await in the background script or its imported modules.