Vue3组合式Api script setup模式中顶层使用await报Top-level ‘await‘ expressions are only allowed when the ‘module‘
今天练习Vue3的Suspense组件的时候碰到在Vue3组合式Api script setup模式中顶层使用await时报错Eslint错误(能正常编译),错误提示是:Top-level 'await' expressions are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', 'no
今天练习Vue3的Suspense组件的时候碰到在Vue3组合式Api script setup模式中顶层使用await时报错Eslint错误(能正常编译),错误提示是:
Top-level 'await' expressions are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', 'node16', or 'nodenext', and the 'target' option is set to 'es2017' or higher.Vetur(1378)
如截图:
解决方案1:检查项目中是否是使用了Vetur
检查项目中是否是使用了Vetur,检查项目中是否是使用了Vetur,检查项目中是否是使用了Vetur。
重要的事情说3遍,Vue3不能搭配Vetur,会有很多奇葩的格式校验问题。
如果安装了,并且启用状态,将其Disable掉就好,可以仅禁用当前工程。因为多数时候我们会同时维护vue2项目和vue3项目。
Vue3搭配的是Volar。
解决方案2:修改项目中的tsconfig.json
一般情况下,使用方案1就都解决了,如果方案1还有问题,可以尝试一下方案2。
修改项目中的tsconfig.json
原配置文件:
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
修改为:
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
],
// https://www.typescriptlang.org/tsconfig#compilerOptions
"compilerOptions": {
"esModuleInterop": true,
"lib": ["es2020"],
"module": "es2022",
"preserveConstEnums": true,
"moduleResolution": "node",
"strict": true,
"sourceMap": true,
"target": "es2022",
"types": ["node"],
"outDir": "dist"
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
参考文档:
至此,问题搞定。
这里贴上Suspense相关的测试代码,文档参考官方文档:
Async1.vue,单文件组件,将会被AsyncWrapper.vue以异步组件的方式加载:
<template>
<div>
<h2>Async1</h2>
</div>
</template>
<script lang="ts" setup>
console.log('[Async1.vue] setup :: enter')
</script>
Async2.vue,单文件组件,将会被AsyncWrapper.vue以异步组件的方式加载:
<template>
<div>
<h2>Async2</h2>
</div>
</template>
<script lang="ts" setup>
console.log('[Async2.vue] setup :: enter')
</script>
Async3.vue,单文件组件,script setup的顶层代码中使用await
<template>
<div>
<h2>Async3, use await</h2>
<h2> {{ refData }} </h2>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
console.log('[Async3.vue] setup :: enter')
const p = new Promise((resolve,reject)=> {
setTimeout(() => {
resolve('Async 3 ok~~~')
}, 5000)
})
const data =await p
console.log('[Async3.vue] setup :: async end')
const refData = ref(data)
</script>
AsyncWrapper,以异步方式加载Async1.vue、Async2.vue,导入底层具备await的组件。AsyncWrapper成为一个异步组件容器,有3个异步依赖项。
<template>
<div>
<h2>AsyncWrapper</h2>
<Async1></Async1>
<Async2></Async2>
<Async3></Async3>
</div>
</template>
<script lang="ts" setup>
import {ref, defineAsyncComponent} from 'vue'
// script setup 单文件组件,顶层使用了await
import Async3 from './Async3.vue'
console.log('[AsyncWrapper.vue] setup :: enter')
// 异步组件,异步的加载单文件组件
const Async1 = defineAsyncComponent(()=> {
return new Promise((resolve, reject)=> {
setTimeout(()=> {
import('./Async1.vue').then((res)=> {
resolve(res)
})
}, 2000)
})
})
// 异步组件,异步的加载单文件组件
const Async2 = defineAsyncComponent(()=> {
return new Promise((resolve, reject)=> {
setTimeout(()=> {
import('./Async2.vue').then((res)=> {
resolve(res)
})
}, 4000)
})
})
</script>
AsyncTester.vue,使用Suspense统一管理几个异步加载的组件内容项
<template>
<h2>测试异步组件相关逻辑</h2>
<Suspense>
<AsyncWrapper />
<template #fallback>
加载中。。。
</template>
</Suspense>
</template>
<script lang="ts" setup>
import AsyncWrapper from '../components/AsyncWrapper.vue'
</script>
// 结果满足预期
1,Suspense启动的时候,在内存中渲染默认插槽内容组件,AsyncWrapper,发现里面有异步加载组件Async1.vue、Async2.vue以及顶层有await的Async3.vue,因此进入挂起状态,显示#fallback插槽,界面上看到加载中。
2,等3个异步等完成之后,三个组件内容,同时渲染到界面上。
3,这在管理多个异步加载组件内容的时候,感觉还是很有用的。
风险: 这还是一个实验性的内置组件,它不一定会最终成为稳定功能,并且在稳定之前相关 API 也可能会发生变化。
更多推荐
所有评论(0)