Remember a route rendering error caused by misuse of top-level await

Background: top-level await

Async asynchronous function can change the chain call form of Promise to synchronous form, which is very friendly to writing and reading code. But there has always been a restriction that the two keywords async and await must appear in pairs . This leads to a problem. If you want to use await, you must define it in an async function, and then call this function. So there has always been a proposal in ECMAScript , called top-level await , which supports the use of await outside of async functions, but it can only be used at the top level of a module. This proposal will officially become the ES standard grammar in 2022.

It used to be written like this:

async function fn() {
    
    
  const value = await 10; // await 不仅可以接Promise，也可以将普通值
  console.log(value)
}

main();

After using top-level await, it can be written like this:

const value = await 10;
console.log(value)

But there must be a premise that it must be at the top level of the module . I just didn't pay attention to this, which caused a problem.

bug appears

Once during development, I had a whim and wanted to use this top-level await. So I wrote code similar to the following:

<script setup>

const res = await axios(url)

</script>

Then after a while, when I went to debug the page, I found that the screen was white. So I opened the debugging tool and saw in the elements panel that the route of the entire page was not rendered, leaving only an empty comment node:

The following warnings are seen in the console:

[Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered.

At first, according to intuition, I thought that there was a problem with the configuration of the routing table, which caused the route to not be rendered. I repeatedly debugged the routing configuration, but it still didn't work. Then search for this warning message, and sure enough, many friends have encountered it, without exception, <script setup>the top-level await is used in . Then I was wondering, why is the agreed-upon top-level await not easy to use?

After staring at the code and thinking for a while, I suddenly remembered that <script setup>it was just syntactic sugar! Then the above code is equivalent to using await in the setup method:

<script>
export default {
    
    
  setup() {
    
    
      const res = await axios(url)
  }
}
</script>

Naturally, this is not used in the top level of the module, which leads to problems in parsing, causing the components to not be rendered correctly, and finally causing the corresponding routing view to not be rendered.

summary

At first, due to empty pages, empty nodes, the misunderstanding was a routing problem. In fact, <router-view> the reason why it is rendered as a comment node seems to be that the routing component is not rendered correctly, or there may be a problem with the component itself. In addition, special attention should be paid to the conditions of use when using some new features.