Top-level await is not available in the configured target environment


字数:494 阅读时长:1分钟 阅读:85

当在使用 Vite 进行项目构建时,可能会遇到如下错误提示:ERROR: Top-level await is not available in the configured target environment

Vite

问题原因

这个错误通常是由于项目配置中的目标浏览器环境不支持 JavaScript 的 top-level-await 特性。top-level-await 允许在模块的顶层直接使用 await 关键字,这在某些现代浏览器中是支持的。但是在一些老旧的浏览器中,这个特性是不支持的,所以在使用 Vite 进行项目构建时,会出现这个错误。

解决方案

  1. 设置 build.targetesnext:将 Vite 配置文件中的 build.target 设置为 esnext。这样做会让 Vite 构建目标为支持最新 JavaScript 特性的环境。这是一个快速解决问题的方法,但可能不适用于需要兼容旧版浏览器的项目。
1
2
3
4
5
// vite.config.js

build: {
target: 'esnext'
}
  1. 指定具体的浏览器版本:如果你需要更精确的控制,可以将 build.target 设置为一个特定的浏览器版本数组。这允许你根据项目需求和用户群体定制支持的浏览器环境。
1
2
3
4
5
// vite.config.js

build: {
target: ["chrome89", "edge89", "firefox89", "safari15"]
}
  1. 使用 vite-plugin-top-level-await 插件:另一个选择是使用 vite-plugin-top-level-await 插件。这个插件可以帮助你在不支持 top-level-await 的环境中使用该特性。它通过转换代码来兼容旧浏览器。

首先安装该插件:

1
pnpm install vite-plugin-top-level-await --save-dev

然后在 Vite 配置文件中引入和使用该插件。

1
2
3
4
5
import topLevelAwait from 'vite-plugin-top-level-await';

export default {
plugins: [topLevelAwait()]
}

参考文档:

  • 您可以在 MDN Web Docs 上查看不同浏览器对 top-level-await 特性的支持情况。
  • vite-plugin-top-level-await 插件的详细使用说明和示例可以在其 GitHub 仓库 中找到。

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2024-01-26
最后更新: 2024-01-29
本文标题: Top-level await is not available in the configured target environment
本文链接: https://www.tiven.cn/p/c71326b0/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!