Skip to content

Issue with behavior in SSR mode #133

@ChamperNet

Description

@ChamperNet

I need the data placed inside Swiper to be rendered on the server.
So I didn't wrapped <Swiper> instance with <client-only> tag,
Everything works just fine, but then I went outside the page there component is placed, and then returned to it, I've got an error and a warning.

<Swiper
      v-if="props?.data?.type === 'slider'"
      :modules="[SwiperAutoplay, SwiperNavigation, SwiperFreeMode]"
      :slides-per-view="1"
      :space-between="32"
      :loop="true"
      :navigation="true"
      :autoplay="{
        delay: 2500,
        disableOnInteraction: true
      }"
      :style="{
        '--swiper-navigation-color': '#fff',
        '--swiper-pagination-color': '#fff'
      }"
    >
      <SwiperSlide
        v-for="(slide, index) in slides"
        :key="'slide-' + index"
      >
        <div class="slider__item">
          <lazy-nuxt-img
            :key="'slider-' + index"
            :src="
              useStrapiMedia(
                slide.attributes?.formats?.medium?.url ?? slide.attributes?.url
              )
            "
            :alt="slide?.attributes?.alternativeText"
            class="slider__image h-full lg:min-h-[540px] max-h-[600px] w-full fit-cover object-cover rounded-2xl aspect-1/1 transition-transform hover:scale-95"
            @click="openLightbox(index)"
          />
        </div>
      </SwiperSlide>
    </Swiper>

Vue warn:
Unhandled error during execution of beforeUnmount hook at Swiper
Error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'removeEventListener')

That error occured only then using routing.

I tracked it into the source file and found out what cause whose errors:

const domMethod = method === "on" ? "addEventListener" : "removeEventListener";
  const swiperMethod = method;
  el[domMethod]("pointerdown", swiper.onTouchStart, {
    passive: false
  });

How can I fix it?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions