vue
vue copied to clipboard
Invalid HTML during SSR if async component fails to load / Error component from Dynamic Components is not used during SSR
Version
2.7.13
Reproduction link
Steps to reproduce
- Open replit link above.
- Click Run.
- Notice that the outputted HTML from
renderToString()
is invalid (it's missing a</div>
and the remainder of the template afterAsyncComp
).
Or if you want to reproduce locally:
- Declare a Dynamically Loaded component with an Async Factory function
- Make the component load promise be rejected
- Notice the output HTML is interrupted wherever the Async Component is used in the template
What is expected?
Error component declared in the async factory would be picked up when the async component fails to load during SSR.
Expected output (of the replit linked):
<app data-server-rendered="true"><div>I always render</div> <p>An error happened during SSR</p> <div>I won't render if AsyncComp rejects</div></app>
What is actually happening?
HTML rendering is interrupted where the async component fails to load, generating invalid HTML
This string is being outputted:
Actual output (of the replit linked):
<app data-server-rendered="true"><div>I always render</div>
try
catch