5

span rendered twice

My hunch is that there is some hydration mismatch where the FontAwesomeIcon was not rendered on the server (only the span) and then on the client both child nodes of the NuxtLink were rendered (the svg and the span), prompting Nuxt to render the span twice.

The console does not return an error, though.

Any thoughts on how to debug this?

This is the Vue component:

<template>
  <ul v-if="routes.length > 0" class="col-span-2 flex flex-col">
    <li v-for="(item, i) in routes" :key="item.name">
      <NuxtLink :to="item.path" target="_blank">
        <FontAwesomeIcon :icon="item.icon" class="mr-3" fixed-width />
        <span>{{ item.title }}</span>
      </NuxtLink>
    </li>
  </ul>
</template>

<script lang="ts">
export default defineComponent({
  props: {
    links: {
      type: Array,
      default: () => ["instagram", "facebook", "email"],
    },
  },
  computed: {
    routes() {
      return [
        {
          name: "instagram",
          path: "https://www.instagram.com/insta.name/",
          title: "Instagram",
          icon: ["fab", "instagram"],
        },
        {
          name: "facebook",
          path: "https://www.facebook.com/fb.name",
          title: "Facebook",
          icon: ["fab", "facebook"],
        },
        {
          name: "email",
          path: "mailto:hello@example.com",
          title: "Email",
          icon: ["fas", "envelope"],
        },
      ].filter((e) => this.links.includes(e.name));
    },
  },
});
</script>
Leon Vogler
  • 532
  • 4
  • 10
  • Not sure but apparently the error is only display when you build your project for production, try that one out. Otherwise, double check that your thing is actually as expected on the server side by disabling JS. And be careful with async code. – kissu Jul 24 '22 at 15:32
  • 1
    Yes, it's only in production and only with the `` component. This component is not async afaik. Wrapping the children in a `` component tackled the double hydration but it is not a solution because it's beside the point of SSR... – Leon Vogler Jul 25 '22 at 08:17
  • 1
    Try to compare both the DOM of the element on the server vs on the client. `client-only` is indeed not the best solution but at the same time, if it's an icon it doesn't really matter SEO-wise or anything. Maybe try to look into their specific github issues to see if they have something related, otherwise I can also recommend this solution: https://stackoverflow.com/a/72055404/8816585 Works great! – kissu Jul 25 '22 at 08:37
  • I have the same problem. How did you solve it? – Alexander Horner Sep 24 '22 at 14:58
  • @AlexanderHorner feel free to post a new question to get your issue solved. – kissu Sep 24 '22 at 17:54
  • I have the same issue. Did you find a solution? I have the same issue without errors. – vinni Feb 03 '23 at 14:46
  • I did not yet find a solution other than wrapping the `` in a ``. – Leon Vogler Feb 19 '23 at 11:57

1 Answers1

0

Wrap you <FontAwesomeIcon /> in a <span> like so:

...
<NuxtLink to="/path" target="_blank">
  <span><FontAwesomeIcon :icon="icon" fixed-width /></span>
  <span>{{ title }}</span>
</NuxtLink>
...

All credit goes to: https://stackoverflow.com/a/73487636/4862595

Leon Vogler
  • 532
  • 4
  • 10