Svelte+TS项目中Vite无法正确应用ES2022构建目标问题

问题背景 #

使用THREE.js、Svelte、TypeScript和Vite搭建网站，测试WebGPURenderer特性时，构建出现如下错误：

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

已将vite.config.js和tsconfig.json的构建目标设置为es2022，但错误依旧。

当前配置文件：
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"
    }
  ]
}

解决步骤 #

1. 更新tsconfig.node.json配置 #

Vite的Node端配置文件可能未同步设置ES2022目标，修改该文件：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "strict": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.js"]
}

2. 配置Svelte插件的编译目标 #

@sveltejs/vite-plugin-svelte有独立的编译目标设置，需同步指定ES2022：
修改vite.config.js中的svelte插件配置：

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

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

3. 优化依赖处理的ESBuild配置 #

在vite.config.js中添加optimizeDeps配置，确保依赖预构建时支持top-level await：

export default defineConfig({
  // 原有配置...
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2022',
      supported: {
        'top-level-await': true
      }
    }
  }
});

4. 清理缓存并重新构建 #

执行以下命令清理Vite缓存后重新构建：

rm -rf node_modules/.vite
npm run build

内容的提问来源于stack exchange，提问作者henriquehhr