CODEWITHSUNDEEP
vuejs3netlifyswiper.jsrollupnuxt3.js
Eido Khudyda
Eido Khudyda

Reputation: 77

Cannot deoploy nuxt 3 to netlify with using Swiper

I'm Trying to deploy Nuxt 3 on netlify but I'm getting this error log:

3:16:10 PM: [error] [vite]: Rollup failed to resolve import "Swiper" from "plugins/swiper.ts". 3:16:10 PM: This is most likely unintended because it can break your application at runtime. 3:16:10 PM: If you do want to externalize this module explicitly add it to 3:16:10 PM: build.rollupOptions.external

this is my plugin/swiper.ts:

import SwiperClass, { Navigation, Pagination, Autoplay, Parallax } from 'Swiper'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';

// import swiper module styles
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation';


SwiperClass.use([Navigation, Pagination])
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(VueAwesomeSwiper, SwiperClass, Swiper, SwiperSlide)
})

and here I'm using the component:

<template> 
    <swiper class="parallax-slider relative" :pagination="{ clickable: true }" :controller="true" navigation
        :allow-slide-next="true" parallax grabCursor :allow-touch-move="true" :slides-per-view="1">
        <swiper-slide v-for="image in images" style="; ">
            <img class="h-80 w-full object-cover" :src="image.imageUrl" alt="">

        </swiper-slide>
    </swiper>
</template>

<script setup lang="ts">

let images = reactive([{
    id: 1, imageUrl: "https://assets.safaraq.com/images/800/trips/79b5edebe8fe1c9a14cbffcd49dca6a3DI4614.jpg",
},
{
    id: 2, imageUrl: "https://assets.safaraq.com/images/800/trips/79b5edebe8fe1c9a14cbffcd49dca6a37Nh398.jpg",
},
{
    id: 3, imageUrl: "https://assets.safaraq.com/images/800/trips/79b5edebe8fe1c9a14cbffcd49dca6a3xc3946.jpg"
},
{
    id: 4, imageUrl: "https://assets.safaraq.com/images/800/trips/79b5edebe8fe1c9a14cbffcd49dca6a310P156.jpg",
},
{
    id: 5, imageUrl: "https://assets.safaraq.com/images/800/trips/79b5edebe8fe1c9a14cbffcd49dca6a3zSf839.jpg",
},
])
</script>

Upvotes: 1

Views: 2689

Answers (1)

Thế Anh Huỳnh
Thế Anh Huỳnh

Reputation: 46

Have you tried to add swiper to your build transpile inside nuxt.config.ts ?

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ['swiper']
  }
});

I find the answer on https://github.com/nolimits4web/swiper/issues/5842

Upvotes: 3

Related Questions