Importing Swiper JS breaks everything

sage
,
1

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
    console.error(err);
  }

  new Swiper('.swiper');

  /* ... additional JS */
};

/**
 * Initialize
 *
 * @see https://webpack.js.org/api/hot-module-replacement
 */
domReady(main);
import.meta.webpackHot?.accept(main);

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

Screen Shot 2022-08-29 at 14.31.45
Screen Shot 2022-08-29 at 14.31.453584×302 66 KB

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.

2

Can you please share the specific code that you tried?

3

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

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.