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', '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"]
}

参考文档：

javascript - Top-level ‘await’ expressions are only allowed when the ‘module’ option is set to ‘esnext' - Stack Overflow

至此，问题搞定。

这里贴上Suspense相关的测试代码，文档参考官方文档：

Suspense | Vue.js

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 也可能会发生变化。