Vite构建报错：配置目标环境不支持Top-level await

问题复现条件 #

• 执行npm run dev启动开发服务时运行完全正常，执行生产构建时抛出错误：

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

• 触发报错的代码是入口文件中顶层位置的异步数据拉取语句：const shopsData = await fetchStarbucksShops();

可选解决方法 #

方法1：调整构建配置适配顶层await（推荐，改动最小）

顶层await是ES2022正式纳入标准的语法，Vite默认配置的构建目标版本较低，不支持该语法，直接修改Vite配置文件的构建目标即可：

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    // 把构建目标调整到原生支持顶层await的版本
    target: ['es2022', 'chrome89', 'edge89', 'firefox89', 'safari15']
  },
  // 4.x之前的旧版本Vite需要额外加以下配置显式开启顶层await语法支持
  esbuild: {
    supported: {
      'top-level-await': true
    }
  }
})

配置修改完成后重新执行构建命令即可正常打包。

方法2：改造异步写法兼容低版本浏览器

如果需要兼容报错信息里列出的旧版本浏览器，不想抬升构建的最低版本要求，把顶层的await逻辑包裹到异步立即执行函数中即可，不需要调整构建配置：

// 移除原有的顶层await写法，将所有依赖异步返回数据的初始化逻辑放入异步函数
const bootstrap = async () => {
  const shopsData = await fetchStarbucksShops()
  // 后续的应用初始化逻辑，比如地图实例创建、框架挂载、数据渲染等全部放到这里
}

bootstrap()

这种写法打包后可以在ES2019兼容的浏览器环境正常运行，没有语法兼容问题。

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