mod is not a function

[impronta48]

I'm running a nuxt 3 project, with simple installation of this module.

I'm running a sample page exaclty as the example, but I get:

Uncaught (in promise) TypeError: mod is not a function
    at swiper-core.mjs:3065:7
    at Array.forEach (<anonymous>)
    at new Swiper (swiper-core.mjs:3064:20)
    at setup (swiper-vue.mjs:594:23)
    at callWithErrorHandling (chunk-VWWL2I6E.js:1565:18)
    at setupStatefulComponent (chunk-VWWL2I6E.js:8631:25)
    at setupComponent (chunk-VWWL2I6E.js:8592:36)
    at mountComponent (chunk-VWWL2I6E.js:6997:7)
    at processComponent (chunk-VWWL2I6E.js:6963:9)
    at patch (chunk-VWWL2I6E.js:6436:11)

this error goes away only removing the :modules attribute from Swiper (but of course the result is not the one I want ;-)

Can you help? Thanks Massimo

[cpreston321]

Can you submit a reproduction 🙏🏼 ?

[impronta48]

What can I provide? My package.json?

Is this happening only to me?

[cpreston321]

Copy the code in stackblitz url on the README, copy your code to see if you can replicate it on that environment.

[alexrichardsweb]

Are you including the modules as strings e.g. :modules=['SwiperNavigation', 'SwiperPagination']? I ask because I had this same issue and that is what I was doing wrong - It needs to be an array of modules e.g. :modules=[SwiperNavigation, SwiperPagination]

[cpreston321]

@impronta48 You can also see how it is setup on: https://stackblitz.com/github/cpreston321/nuxt-swiper/tree/main/examples/swiper-basic?file=app.vue.

[omgzsa]

I have the exact same issue. const swiper = useSwiper() is undefined as well, the documentation doesn't tell much about the usage. I inserted the stackblitz code in my project, it's also just somewhat working.

<template>
  <div class="py-16 space-y-10 site-padding">
    <h2>Featured categories</h2>
    <Swiper
      :height="300"
      :modules="[SwiperPagination]"
      :slides-per-view="1"
      :pagination="{ clickable: true }"
      :space-between="5"
      class="swiper swiper-cards"
    >
      <SwiperSlide v-for="slide in slides" :key="slide.id">
        <HomeCategoriesCard
          :title="slide.title"
          :alt="slide.title"
          :img="useAsset(`images/homepage/${slide.img}`)"
        />
      </SwiperSlide>
      <SwiperPagination />
    </Swiper>
  </div>
</template>

[Vue warn]: Failed to resolve component: SwiperPagination
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Categories> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …}  ... > 
  at <BaseTransition onAfterLeave= [ƒ] mode="out-in" appear=false  ... > 
  at <Transition onAfterLeave= [ƒ] name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

[0Shino0]

I encountered this problem when refactoring a vue3 project into nuxt3, and I think it may be because nuxt-swiper changed some of the modules names. Because I triggered this error by copying the original swiper configuration, This problem is solved when I :modules="[EffectCoverflow, SwiperNavigation]" is changed to :modules="[SwiperEffectCoverflow, SwiperNavigation]"。A specific module name, you can check https://nuxt.com/modules/swiper#usage

[WuChenDi]

Hello, everyone. I would like to inquire whether this issue has been addressed. I noticed that it persists on StackBlitz.

[saint-james-fr]

I encountered this problem when refactoring a vue3 project into nuxt3, and I think it may be because nuxt-swiper changed some of the modules names. Because I triggered this error by copying the original swiper configuration, This problem is solved when I :modules="[EffectCoverflow, SwiperNavigation]" is changed to :modules="[SwiperEffectCoverflow, SwiperNavigation]"。A specific module name, you can check https://nuxt.com/modules/swiper#usage

This worked for me.