Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with behavior in SSR mode #133

Open
ChamperNet opened this issue Sep 17, 2024 · 0 comments
Open

Issue with behavior in SSR mode #133

ChamperNet opened this issue Sep 17, 2024 · 0 comments

Comments

@ChamperNet
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant