Vite refuses to use the correct build target in my Svelte / TS project

Question

I'm creating a website using THREE.js, Svelte, Typescript and Vite. When I tried to test a new THREE.js feature (WebGPURenderer), I got the following error in the build step:

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

It looks like this new feature is using top-level await

I tried setting the build target to 'es2022' (which supports top-level await) in 2 different files, but I keep getting the same error:

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

vite.config.js

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  build: {
    target: "es2022"
  },
  esbuild: {
    supported: {
      'top-level-await': true
    },
  },
  plugins: [svelte()],
});

tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ES2022",
    "resolveJsonModule": true,
    "strict": true,
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true
  },
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.svelte"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Answer 1

Add the following code in vite.config.js :

  export default defineConfig({
      enter code here`plugins: [vue()],
      build:{
       target: "esnext" // or "es2019",

      }
    }

Answer 2

Update vite.config.js file by adding these options:

{
...
  build: {
    target: "es2022"
  },
  esbuild: {
    target: "es2022"
  },
  optimizeDeps:{
    esbuildOptions: {
      target: "es2022",
    }
  }
}