Empty SVG tags when using renderToString() for the first time

[MickL]

I render a component including icons (with mode svg) to html code to be shown in eBay descriptions:

import { renderToString } from '@vue/server-renderer';
import { MyComponent } from '#components';

onMounted(async () => {
  await renderToString(
    h(MyComponent, {
      prop1: 'hello',
    }),
  );
})

Since I updated to 1.4.x the icons are not working anymore. The svg tags are just empty.

I tried out a lot and found out that the svg tags are just empty on first call of renderToString(). But they are visible when one of this conditions is true:

• When changing something on the page and Nuxt is refreshing (without refreshing the browser window)
• If I call it twice with a little delay between the icons are working correctly
• If I have the same icon visible on the page already

[MickL]

I created a Stackblitz:
https://stackblitz.com/edit/nuxt-starter-qzwpbz?file=app.vue

@antfu Do you have an idea maybe? Must be something related to that the icon is not yet loaded

[antfu]

I think this is because the Icon components are async components - maybe you need to try wrapping your component with Suspense to await the icon to be loaded before the renders the output