Components importing JavaScript modules with await are not detected as async, but do work

[mitar]

Vue version

v3.3.11

Link to minimal reproduction

https://play.vuejs.org/#eNqNU01v2zAM/SuCTjbQ2Ch6C7KgWxcM66Ed1hx9US06Vmd9QKKTFIH/+yg5zpJgKHqyxUeKj49PB/7VuWLbA5/zRai9csgCYO+WlVHaWY/su0DBGm81q3hRSjoVb6HilVmUYwGl0gFBu04g0ImxhVTb5eHAHl+en4qAXpmNat6zeFXOhmFRRjzecFbFbziG2ppGbaiBNcToEO+qeG21Ux34Z4fKGuo9ZwmJmOg6u3tMMfQ93EzxuoX6z3/ib2EfYxX/5SGA30LFTxgKvwEc4dXLE+zp/wRqK/uOsj8Af0OwXR85jmnfeiOJ9lleYvsz6UqSrMNqj2DCNFQkGjOHlF9xWsvDB6P/o3tX3KW6ygyk4nFFpB/s0wYlNKLvkGViJxSyBrBus4q3iC7MyzJ+X5UprN+UUXjiOzbRgK2VcZIfq/VxCpoUYqS2ntikUO1BgkEluhARq9UkTQtCgqfoifODNTQxztbv7qilcK5TtYjjTd0nDYa8wBZMltGqHE0POfuyZNMhmSTL8zxZZzTrTAt3ZZ4RuFSOhB2bTxLU0lCZhE5tfWEAS+N0eU9ppe9pMg0zafU9yVzc3pJ3A57HCwh69urtjvxUOG9leh+nncdbktP8zIMhPaIjPtf8quyCwBV2QWJ8n0dDDH8BoGhOvg==

Steps to reproduce

1. Create a JavaScript module which uses top-level await, e.g., calls fetch to load some data.
2. Export that data from the JavaScript module.
3. Import that module inside script setup of your Vue component.
4. Use that component without wrapping it with Suspense.

What is expected?

Multiple options:

• That data would not be loaded.
• That component would be rendered before data is loaded.
• That Vue complains that the component is not wrapped inside Suspense and that the component is async.

What is actually happening?

It just works. No need for Suspense, no need to make component async. Data is nicely loaded.

System Info

No response

Any additional comments?

So I discovered this because I was using this pattern to load some data. And then I wanted to also use top-level await inside script setup. But it didn't work. So I was surprised why the simple await does not work, while import does. I realized that there is something strange going on. In my view:

• Or script setup should allow top-level await without Suspense.
• Or top-level await in imported modules should not work either.

Personally, I would vote for script setup to support top-level await without Suspense. While I understand why some people like UX of Suspense, to me it makes little sense because I already handle lazy loading of components (and data) through Vue router hooks.

[yyx990803]

Module level await happens at module loading time - i.e. the code that mounts the entire Vue application won't execute until the await in your data is loaded. Once it's loaded, it is the same as mounting a sync component.

In other words, your users will see a blank screen until the data is loaded, and Vue wouldn't be able to provide fallback states while waiting for the data to load, or show an error state in case the data load fails. Suspense, on the other hand, gives you the ability to control that.