Al implementar mi aplicación Nuxt en modo de producción en Firebase, recibo el siguiente error cada vez que intento navegar a cualquier página que no sea la página de inicio:

 Node.appendChild: Cannot add children to a Comment

Descubrí que cuando comento mi componente home-slider de inicio en index.vue ya no aparece este error, sin embargo, al comentar todo dentro del home-slider mientras dejo la llamada del componente, se genera el error.

plantilla index.vue

 <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>

Plantilla HomeSlider.vue

 <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>

Eliminar el componente client-only también lo soluciona, pero luego splid no se representará correctamente.

De acuerdo con este problema de github, esto podría estar relacionado con HTML no válido, sin embargo, no puedo ver qué lo está causando, puedo ver que cuando navego a cualquier ruta, primero muestra index.vue, luego intenta mostrar la otra página, es ¿Hay alguna manera de evitar que otras páginas se rendericen?

Tengo otro Splide en una página diferente que no parece darme ningún problema cuando navego a la página de inicio.