Vue3 top-level await Eslint fails

Question

Following the official documentation: https://vuejs.org/api/sfc-script-setup.html#top-level-await

I'm trying to create an async component like that:

<template>
  <p>Async data: {{asyncData}}</p>
</template>

<script setup>
import {ref} from 'vue'
const asyncData = ref(null)
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
await sleep(2000);
asyncData.value = 'abcd1234'
</script>

The component works fine. The problem is: Eslint detects that error:

Parsing error: Cannot use keyword 'await' outside an async function

How can I deal with that?

In fact it's Vue who is forcing me to write an invalid code...

score 1 · Answer 1 · answered Apr 04 '22 at 08:28

1

I see it can be solved updating Eslint config:

.eslintrc.cjs

module.exports = {
  root: true,
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 2022,
  },
  ...
};

But shouldn't be as default?

answered Apr 04 '22 at 08:28

Marc Pont

988
2
14
34

Hello @marc-pont. Could you please elaborate for people that are new to Vue.js where exactly this configuration is or goes? Is it a new file that is created? Is there a need for a plug in? Etc. Details for newbies. – José Ramírez Dec 27 '22 at 15:19

score 0 · Answer 2 · answered Mar 01 '23 at 18:48

Parsing error with Top Level await:

Using ESLint <= v7.x

The parser espree that comes with ESLint v7.x doesn't understand the syntax of ES2022, so it can't parse the Top Level await either. However, espree >= v8 can understand the syntax of ES2022 and parse the Top Level await. You install espree >= v8 and specify "espree" and ES2022 in your configuration, the parser will be able to parse it.

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'espree',
    ecmaVersion: 2022,
    sourceType: 'module'
  },
}

Using ESLint >= v8.x

You need to specify 2022 or "latest" for parserOptions.ecmaVersion.

module.exports = {
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
}

Vue3 top-level await Eslint fails

2 Answers2