Importing Swiper JS breaks everything

I can’t for the life of me figure out what’s going on. When I simply try to import Swiper, I get a breaking error. (Swiper included in package.json: "swiper": "^8.3.1",)

Here’s my app.js:

import {domReady} from '@roots/sage/client';
import * as bootstrap from 'bootstrap';
import Swiper from 'swiper';

 * app.main
const main = async (err) => {
  if (err) {
    // handle hmr errors

  new Swiper('.swiper');

  /* ... additional JS */

 * Initialize
 * @see

I get the following error:
Uncaught TypeError: Cannot read properties of undefined (reading 'call')

I’ve tried everything – removing all other js and imports to see if there is a conflict, various ways of importing, etc. with no luck. If I remove all Swiper references, my app works fine. Any ideas? Thanks.

Can you please share the specific code that you tried?

I think I had same issue and it occured it there was no .swiper element on page itself present… Try wrap it into conditional like this, just an example of what I do:

// import Swiper JS
import Swiper, { Navigation, FreeMode } from "swiper";

const gridSliders = document.querySelectorAll('.grid-slider-swiper');
if ( gridSliders ) {
    gridSliders.forEach(slider => {
        const swiper = new Swiper(slider, {
          // configure Swiper to use modules
            modules: [Navigation, FreeMode],
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            slidesPerView: "auto",
            spaceBetween: 20,
            centeredSlides: true,

I deduced that this had something to do with the Boostrap import conflicting somehow. I removed that and the error went away and other libraries imported worked.