3

When deploying my Nuxt app in production mode to Firebase I get the following error whenever I attempt to navigate to any page other than the homepage:

Node.appendChild: Cannot add children to a Comment

I've found that when I comment my home-slider component in index.vue I no longer get this error, however commenting everything inside the home-slider while still leaving the component call throws the error.

index.vue template

<template>
  <article>
    <div v-if="slides && slides.length > 0">
      <section id="banner">
        <div class="container">
          <client-only>
            <home-slider :slides="slides"></home-slider>
          </client-only>
        </div>
      </section>
    </div>

    [...unrelated html]
  </article>
</template>

HomeSlider.vue template

<template>
  <div>
    <Splide id="home-slider" :options="options">
      <SplideSlide v-for="slide in slides" :key="slide.id">
        <a :href="slide.enlace" class="slide">
          <div
            class="slide-content"
            v-html="slide.contenido"
            v-show="slide.contenido"
          ></div>
          <div class="img-container">
            <img :src="slide.imagen" :alt="slide.titulo" />
          </div>
        </a>
      </SplideSlide>
    </Splide>
  </div>
</template>

Removing the client-only component also fixes it, but then splide won't render correctly.

According to this github issue this could be related to invalid HTML, however I can't see what's causing it, I can see that when I navigate to any route it first renders index.vue, then it tries to render the other page, is there a way to prevent other pages from rendering?

I have another Splide in a different page which doesn't seem to be giving me any issues when I navigate to the homepage.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Danyx
  • 574
  • 7
  • 34
  • `when I navigate to any route it first renders index.vue`, what? No need to prevent anything from rendering here, fixing the issue is probably the best way of doing things here. So, the issue is probably coming from the Splide slider? Can you confirm it? I recommend import it locally, [here](https://stackoverflow.com/a/67751550/8816585) are various approaches. Anyway, having a [repro] would probably be nice here with some actual data to work with, it's hard to debug with just that. – kissu Jun 19 '22 at 09:23

0 Answers0