vue icon indicating copy to clipboard operation
vue copied to clipboard

Invalid HTML during SSR if async component fails to load / Error component from Dynamic Components is not used during SSR

Open brunomperes opened this issue 2 years ago • 2 comments

Version

2.7.13

Reproduction link

replit.com

Steps to reproduce

  1. Open replit link above.
  2. Click Run.
  3. Notice that the outputted HTML from renderToString() is invalid (it's missing a </div> and the remainder of the template after AsyncComp).

Or if you want to reproduce locally:

  1. Declare a Dynamically Loaded component with an Async Factory function
  2. Make the component load promise be rejected
  3. 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> 

brunomperes avatar Oct 24 '22 10:10 brunomperes

try

cjy926 avatar Nov 19 '22 11:11 cjy926

catch

webbseo avatar Jan 24 '23 18:01 webbseo