将 Swiper js 与 Nuxt 一起使用会引发依赖项未找到错误

Question

我正在使用 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 本身。我已按照文档中的说明进行操作，但出现 dependency not found 错误

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>

更新： 按照建议尝试插件注入，仍然得到

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);
    })
}

Answer 1

基于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)对问题没有影响。

解决方法是通过显式路径导入 swiper 文件。如果您查看 package's exports，您可以找到要使用的显式路径：

"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 动态修改标记，因此只选择特定于浏览器的导出，在这种情况下是缩小的包：

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

也使用 <client-only> component 仅在客户端呈现 swiper 标记。

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

还在 mounted hook 中实例化 Swiper，这仅发生在客户端：

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

访问模板参考2️⃣前注意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()。

<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

将 Swiper js 与 Nuxt 一起使用会引发依赖项未找到错误

Using Swiper js with Nuxt throws dependency not found error

swiper

nuxt.js