Can't access property "removeEventListener" when destroy is called before swiper is mounted

[nWacky]

Hello

I'm using swiper in nuxt. Sometimes I was getting the exception*:

Error: "TypeError: can't access property "removeEventListener", el[domMethod] is undefined"

The issue was that, when being initialized, swiper allows to be initialized for a class that doesn't exist yet in DOM without an exception. Then swiper can be mounted onto the element later.

When destroying, it only checks if swiper instance exists and isn't destroyed.

If swiper is never mounted, el is a string containing a class name or undefined. In this case destroy throws when unmounting events because el['removeEventListener'] is undefined.

I'm not sure if

• this should be caught inside a vue component (perhaps, in swiper/vue, try/catch destroy inside onBeforeUnmount)
• or if swiper/core should handle this case, as el can be a string before swiper is mounted.

There's a similar issue #4043, but it didn't say anything conclusive

* the exception happened because back button was clicked twice with suspense and for some reason nuxt didn't execute onMounted hook, but did call onBeforeUnmount, I couldn't create a reproduction. Probably similar issue

---

codesandbox reproduction example

when html element exists

1. initialize swiper
2. swiper works
3. destroy swiper
4. no exceptions occur

if element is deleted

1. initialize swiper
2. no exceptions occur
3. destroy swiper
4. TypeError: can't access property "removeEventListener"

[tusharbansode]

export default defineNuxtPlugin((nuxtApp) => {

const testSwiperError = ( error, instance, info ) => {
    return (
        error instanceof TypeError &&
        error.message?.includes("Cannot read properties of undefined (reading 'removeEventListener')") &&
        (error.stack?.includes("swiper-core") || error.stack?.includes("swiper_vue") || error.stack?.includes("swiper/modules"))
    );
}

nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
  
    if (testSwiperError(error, instance, info)) {
        console.warn("[Handled Swiper Error]:", error.message);
        return;
    }
    throw error;
}

nuxtApp.hook('vue:error', (error, instance, info) => {
    
    if (testSwiperError(error, instance, info)) {

        console.warn("[Handled Swiper Error]:", error.message);
        return;
    }
    
    throw error;
})

})

[nWacky]

Yes.

It's been a while since I asked this question

NuxtErrorBoundary can also be used to catch any swiper errors

<script setup lang="ts">
const logSomeError = (e: unknown) => {
  console.error("Swiper error", e);
};
</script>

<template>
  <NuxtErrorBoundary @error="logSomeError">
    <swiper
      :slides-per-view="3"
      :space-between="50"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  </NuxtErrorBoundary>
</template>