How to Correctly Integrate SwiperJS into an Astro Component to Avoid Module Resolver Errors?

Question

I'm working on a project using Astro and trying to integrate SwiperJS. Everything works as expected locally, but as soon as I deploy my application to the server, issues arise. Specifically, I encounter an error when attempting to import SwiperJS through a tag in my .astro file. The error I receive is:

Uncaught TypeError: Failed to resolve module specifier "@swiper/swiper-bundle.min.mjs". Relative references must start with either "/", "./", or "../".

Here's a snippet of my code showing how I'm trying to integrate SwiperJS:

<script type="module">
    import Swiper from '@swiper/swiper-bundle.min.mjs';
    // Initialize Swiper...
</script>

I have tried various methods to fix this error, including changing the import path to relative and absolute paths, but I still get similar error messages.

Questions:

How can I integrate SwiperJS into an Astro component without encountering module resolver errors, especially when deploying to a server? Is there a specific way import paths should be handled in Astro to avoid such issues? Has anyone experienced something similar and found a solution that works both locally and on the server? I followed the guide for integrating SwiperJS into Astro, but this specific issue does not seem to be directly addressed in the documentation or common guides. Any help or advice on how to resolve this import error would be greatly appreciated.

Answer 1

the correct way to use swiper can find it here: https://github.com/MicroWebStacks/astro-examples/tree/main/54_swiper-slider and you should add to the

 <a data-astro-reload></a>

for go to the swiper page this: data-astro-reload. You can find the explanation here.

If the swiper is in index.astro woldn't be any problem.

Your script will look like this:

<script src="./folderjs/yourswiper.js"></script>

And your script must have the modules imported, for example:

 // Import Swiper
    import Swiper from "swiper";
    
    // Import Swiper modules
    import { Navigation, FreeMode, Thumbs, Mousewheel, Autoplay } from "swiper/modules";
    
    // Import Swiper styles
    import "swiper/css";
    import "swiper/css/navigation";
    import "swiper/css/free-mode";
    import "swiper/css/thumbs";
    
    // Wait for DOMContentLoaded event
    document.addEventListener("DOMContentLoaded", () => {
      // Initialize thumbs swiper
      const thumbs_swiper = new Swiper(".thumbs", {
        modules: [FreeMode],
        spaceBetween: 3,
        slidesPerView: 7,
        freeMode: true,
        watchSlidesProgress: true,
      });
    
      // Initialize main swiper
      const main_swiper = new Swiper(".main", {
        modules: [Navigation, Thumbs, Mousewheel, Autoplay],
        spaceBetween: 4,
        slidesPerView: 2,
        mousewheel: true,
        freeMode: true,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: {
          delay: 1500,
        },
        thumbs: {
          swiper: thumbs_swiper,
        },
        breakpoints: {
          320: {
            slidesPerView: 1,
            spaceBetween: 4,
          },
          768: {
            freeMode: false,
            slidesPerView: 3,
            spaceBetween: 4,
          },
          1024: {
            slidesPerView: 4,
            spaceBetween: 4,
          },
          1280: {
            slidesPerView: 7,
            spaceBetween: 4,
          },
        },
      });
    });