defineAsyncComponent render error in ssr

[baiwusanyu-c]

Vue version

latest

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV____SSR__eNp9Uk1PwzAM/Ssml7VS14zr6CohTtw4cMxldC50WpwocTuhqf8dp/tgDEROjv38/J6Tg3r0vhx6VEtVMVq/WzPWhgxDtY6f1Dw56+tKf8eGKn0NpCo2ofMMEblP5c56FxgOsMG2I3w8dzpC4gICtjBCG5yFmcydXRoS5pQvdbokWVJuHEWGiwBYwZ/MWZavasI9vAhFFzHLAka3GzCN3GLDOaxqOBgCOaL1tbPo+tSW8idslujyAu4Xi0X+kLBjnifHR4+1KtRR7dyufbmNjmRvE6c5FaJRy/MUo8RBuhv1wezjUuvYNsnWNpYuvGuJytATi5QSo52/BbePGITYqOKKQ0tywDAPSBsMGP7jvIH+4p1MGRrFynnJN28PUG26YQoAnmcW5AVYNnw3lfSx9uMTqPELuPDI3A==

Steps to reproduce

open the playground

What is expected?

render the component

What is actually happening?

get error

System Info

No response

Any additional comments?

No response

[edison1105]

This could be a bug on the playground, currentInstance = null that's not possible, did you test it in the test case?

[baiwusanyu-c]

This could be a bug on the playground, currentInstance = null that's not possible, did you test it in the test case?

core/packages/runtime-core/__tests__/hydration.spec.ts

Line 716 in 78b8615

test('async component', async () => {

This test is passed, maybe it is a playground bug

[Csszabi98]

Hey, it is definitely not a playground bug, I have run into the exact same issue with our production application.

Here is some more context:

• It is an SSR app built on https://vite-plugin-ssr.com/ with Vue 3.3.4
• We have noticed that sometimes if the Async component chunks were loading slower on flaky networks (and always in Safari for some reason), the hydration of components was failing, but was succeeding after the chunks had been cached on subsequent page visits.

I would say as the issue naturally occurs in Safari, even on stable networks, it is quite severe.

After looking into the implementation for defineAsyncComponent I have noticed that the case of hydration is never handled when the component is not managed by a Suspense.

core/packages/runtime-core/src/apiAsyncComponent.ts

Line 198 in 623ba51

return () => {

       if (loaded.value && resolvedComp) {
          return createInnerComp(resolvedComp, instance)
        } else if (error.value && errorComponent) {
          return createVNode(errorComponent, {
            error: error.value
          })
        } else if (loadingComponent && !delayed.value) {
          return createVNode(loadingComponent)
        } 
         
         // If none of the above conditions are met, meaning that the component is still loading 
         // and the component was rendered on the server, then no vnode is returned resulting
        // in a `<!--[-->`(Fragment) being rendered and hydration mismatch in return

Workaround: Wrap each AsyncComponent in the template with Suspense

<template>
  <Suspense>
    <AsnycComp />
  </Suspense>
</template>

<script setup>
const AsyncComp = defineAsyncComponent(() => import('./Comp.vue'));
</script>

[edison1105]

The origin issue can no longer be reproduced in the playground with the latest version.

@Csszabi98
Please create a new issue with a minimal reproduction if it still not working in your application.