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

Answer 2

From the Astro docs:

Astro will not process your script tags in some situations. In particular, adding type="module" or any attribute other than src to a <script> tag will cause Astro to treat the tag as if it had an is:inline directive.

Thus you need to write the script tag without type="module". And for the CSS to be bundled by Astro, you need to import it as part of the front-matter:

---
import 'swiper/css';
---

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

<script>
  import Swiper from 'swiper';
  const swiper = new Swiper('.swiper', {});
</script>