Using Swiper js with Nuxt throws dependency not found error

Question

I was using vue-awesome-swiper but recently I have some issues with it on mobile devices ( i have a buttons carousel and when i click on one of them it takes around a second or two for btn to be clicked ) and as that package hasn't been updated since 2020 and still using swiper v5 , I decided to use Swiper js itself . I have done as said in docs but I get dependency not found error

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "dev:host": "nuxt --hostname 0.0.0.0 --port 8000",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/device": "^2.1.0",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "swiper": "^7.0.9",
    "vuetify": "^2.5.5"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.1",
    "@mdi/font": "^5.9.55",
    "@nuxtjs/dotenv": "^1.4.1",
    "noty": "^3.2.0-beta",
    "nuxt-gsap-module": "^1.2.1",
    "sass": "1.32.13"
  }
}

test.vue

<template>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, idx) in 20" :key="item" style="width:auto">
                <v-chip
                class="items px-2"
                :class="{'items--active': activeId === item }"
                label @click.prevent="itemClicked(item, idx)">
                    {{item}}
                </v-chip>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper , { FreeMode } from 'swiper';
import 'swiper/css';
export default {
    data(){
        return{
            activeId: null
        }
    },
    methods:{
        itemClicked(item, itemIndex){
            this.activeId = item
        },
    },
    created(){
        if(process.client){
            Swiper.use([FreeMode]);
            const swiper = new Swiper('.swiper', {
                preventClicks: true,
                preventClicksPropagation: true,
                loop: false,
                slidesPerView: 'auto',
                spaceBetween: 30,
                freeMode: {
                    enabled: true,
                    sticky: true
                }
            });
        }
    }
}
</script>

UPDATE: As suggested tried plugin injection and still get

These dependencies were not found:
* swiper in ./plugins/swip.js
* swiper/css in ./plugins/swip.js
To install them, you can run: npm install --save swiper swiper/css

plugins/swip.js

import Swiper , { FreeMode } from 'swiper';
import 'swiper/css';
export default ({ app }, inject) => {
    inject('swiper', (el , options)=>{
        Swiper.use([FreeMode]);
        return new Swiper(el, options);
    })
}

Can you create a new plugin.js file? Try to import the swiper there. If that works, then inject it into the Nuxt instance. Otherwise there might be some other issue. — HenrijsS, Oct 20 '21 at 11:01
@HenrijsS , nope! updated my question with the plugin inject codes. still get error (if my injection is correct) — Mojtaba Barari, Oct 20 '21 at 12:30
Since you're using Swiper7 here, maybe give a read to this one: https://github.com/nolimits4web/swiper/issues/4871 Also, I'm not sure that this works with SSR? You could maybe also try this solution: https://stackoverflow.com/a/69572014/8816585 At least, there are various github issues with this keyword: https://github.com/nolimits4web/swiper/issues?q=is%3Aissue+dependency+not+found Maybe try to look for `ssr` too. — kissu, Oct 20 '21 at 15:18
@kissu , Its vue wrapper only works on Vue3 , but I'm not using that. I'll try v.6 hoping that would work. tanx — Mojtaba Barari, Oct 20 '21 at 15:32
Not sure I understood the part with the Vue3 wrapper. What are you talking about? — kissu, Oct 20 '21 at 15:38

tony19 · Accepted Answer · 2022-07-15T20:29:35.653

Based on swiper#4871, the Nuxt environment doesn't support the tooling required to import swiper, but it's unclear how to fix this in Nuxt. Adding "type": "module" to package.json (per the recommended guide) has no effect on the problem.

A workaround is to import the swiper files by explicit path. If you look at the package's exports, you could find the explicit path to use instead:

"exports": {
  ".": "./swiper.esm.js",                   // import 'swiper' → import 'swiper/swiper.esm.js'
  "./core": "./swiper.esm.js",              // import 'swiper/core' → import 'swiper/swiper.esm.js'
  "./bundle": "./swiper-bundle.esm.js",     // import 'swiper/bundle' → import 'swiper/swiper-bundle.esm.js'
  "./css": "./swiper.min.css",              // import 'swiper/css' → import 'swiper/swiper.min.css'
  "./css/bundle": "./swiper-bundle.min.css",// import 'swiper/css/bundle' → import 'swiper/swiper-bundle.min.css'
  ⋮
}

swiper modifies the markup dynamically, so only choose browser-specific exports, which are the minified bundles in this case:

import Swiper from 'swiper/swiper-bundle.min'
import 'swiper/swiper-bundle.min.css'

Also use the <client-only> component to render the swiper markup only on the client.

<client-only>
  <div class="swiper">
    ⋮
  </div>
</client-only>

Also instantiate Swiper in the mounted hook, which occurs only client-side:

export default {
  mounted() {
    new Swiper()
  }
}

Note the Swiper constructor can recieve either a selector string, or an HTML element. However, only an HTML element seems to work for Swiper in Nuxt, so we have to use a template ref to pass that HTML element 1️⃣. Given that the template ref is contained in <client-only>, the Swiper elements are not rendered until the next render cycle, so we have to await $nextTick() before accessing the template ref 2️⃣.

<template>
  <client-only>               1️⃣
    <div class="swiper" ref="swiper">
      ⋮
    </div>
  </client-only>
</template>

<script>
⋮
export default {
  async mounted() {
    await this.$nextTick() 2️⃣
    new Swiper(this.$refs.swiper 1️⃣)
  }
}
</script>

demo

score 0 · Answer 2 · answered Jun 05 '22 at 15:50

If someone has a similar issue with the latest versions of Nuxt and Swiper, here is the solution

https://github.com/nuxt/framework/issues/4399#issuecomment-1128823583

The error I was getting:

Cannot find module '/.nuxt/prerender/chunks/app/modules/autoplay/autoplay.js' imported from /.nuxt/prerender/chunks/app/server.mjs

Using Swiper js with Nuxt throws dependency not found error

2 Answers2

Linked