Nuxt 3 "generate" results in <font-awesome-icon /> to output whatever follows twice

[Morpheu5]

Describe the bug I am using this component with Nuxt 3 as described here and I'm seeing this weird behaviour. Say I have something like this

<a href="https://example.com"><font-awesome-icon icon="fa-brands fa-twitter" />Example</a>

if I run the dev server, everything is fine, but if I run generate and serve the output through a static HTTP server, I get "Example" printed twice. If I wrap the text in a tag, I get the tag and text twice (i.e. <span>Example</span><span>Example</span>). Weirdly enough, though, the generated HTML does not contain the repetition, so I suspect something weird is going on in the browser.

Reproducible test case https://andreafranceschini.org/files/afnuxt.tgz

Expected behavior A clear and concise description of what you expected to happen.

Desktop (please complete the following information):

• Happens on all browsers

[Morpheu5]

I found a workaround, which is to enclose the font-awesome-icon component in a dummy tag like a span, in that case I get no duplication (no visible duplication, at least).

[ricky11]

Same issue, wrapping it in a span is a short term solution. fa pro team pls address this, we're paying customers.

[robmadole]

Have you tried avoiding self-closing tags?

<a href="https://example.com"><font-awesome-icon icon="fa-brands fa-twitter"></font-awesome-icon>Example</a>

And I cannot download your reproduction. Can you check that please?

[ricky11]

Have you tried avoiding self-closing tags?

<a href="https://example.com"><font-awesome-icon icon="fa-brands fa-twitter"></font-awesome-icon>Example</a>

And I cannot download your reproduction. Can you check that please?

For me i have to do something like this to make sure text to the right of it is not displayed twice. Using nuxt3

seems quite inconvenient and hacky to do so.

[Reaper88]

I am having the same issue and also gettings alot of logs like this from nuxt server side and also wrapping it doesn't do any good to me.

Could not find one or more icon(s) { prefix: 'fas', iconName: 'server' } {} 

[corybagozzi]

I am having the same issue and also gettings alot of logs like this from nuxt server side and also wrapping it doesn't do any good to me.

Could not find one or more icon(s) { prefix: 'fas', iconName: 'server' } {} 

I am having this same issue. Getting the log error like this one but the icon is working on local and when deployed to Vercel.

Wrapping in a Span did fix the doubling problem for whatever came after the icon.

[antoinezanardi]

Any update on this please ?

[ricky11]

wrap it in a span is the current hacky solution.

[CallumWatkins]

I've posted a possible solution to this issue on Stack Overflow: https://stackoverflow.com/a/74999711/4415734