获取在Vite中构建我的项目的错误-顶层等待在配置的目标环境中不可用

Question

我尝试在vite中构建我的项目，

my project - https://github.com/yakovcohen4/starbucks-openlayers

我运行npm run dev，所有工作。

但是当我运行构建它时，我得到一个错误。

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

我试图获取数据，并认为这是问题所在链接(第22+23行)- https://github.com/yakovcohen4/starbucks-openlayers/blob/main/starbucks-project/src/main.ts

const shopsData = await fetchStarbucksShops();

如果有人遇到这个诅咒，我很乐意帮助

Answer 1

Top-level-await是一个在旧浏览器中无法运行的新功能。如果您相信您的用户使用相对较新的版本，并且可以处理top-level-await，那么您可以设置vite。像这样配置:

export default defineConfig({
build: {
target: 'esnext' //browsers can handle the latest ES features
}
})

或

export default defineConfig({
esbuild: {
supported: {
'top-level-await': true //browsers can handle top-level-await features
},
}
})

Answer 2

首先，检查这个;https://github.com/vitejs/vite/issues/6985。如果您找不到答案，请尝试创建一个大型异步函数，该函数执行自己以降低await的级别;

(async () => {
export const shopsData: shopType[] = await fetchStarbucksShops();
export const countryGeoData: countryGeoDataType = await fetchGeoJsonCountry();
.
.
.
.
.
})();

它可能不工作。无论在async函数中使用await还是使用.then()

，都应该避免使用顶级等待。