Swiper: Cannot read property 'addClass' of undefined

[yyccQQu]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: EXACT RELEASE VERSION OR COMMIT HASH, HERE.
• Platform/Target and Browser Versions: PLATFORM CLIENT YOU ARE TARGETING SUCH AS macOS, Windows, CORDOVA, IOS, ANDROID, CHROME, ETC.
• Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY _(IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP)_.

What you did

EXPLAIN WHAT YOU DID, PREFERABLY WITH CODE EXAMPLES, HERE.

Expected Behavior

EXPLAIN WHAT IS TO BE EXPECTED, HERE.

Actual Behavior

EXPLAIN WHAT IS ACTUALLY HAPPENING, HERE.

P.S. Remember, an issue is not the place to ask questions. You can use Stack Overflow
for that.

Before you open an issue, please check if a similar issue already exists or has been closed before.

[yyccQQu]

Uncaught TypeError: Cannot read property 'addClass' of undefined
at h.init (swiper.min.js?v=:12)
at h.beforeInit (swiper.min.js?v=:12)
at swiper.min.js?v=:12
at Array.forEach ()
at swiper.min.js?v=:12
at Array.forEach ()
at h.n.emit (swiper.min.js?v=:12)
at h.init (swiper.min.js?v=:12)
at new h (swiper.min.js?v=:12)
at video:1532

[SchmidtDawid]

Check your classes. If you have multiple swiper inits and they will catch elements with same class (for example thumbs slider) it could fails like that.

[robpop]

Add a JSFiddle or CodePen for better help

[nolimits4web]

Closing due to inactivity and/or no responses from issue author

[tzs007]

hello,

same issue here... i cant understand why it has been so complicated... the docs has a lots of typo errors or missunderstandable contents, the Swiper.use() doesn't load moduls... etc.

I built a gallery Swiper (in next.js) with thumbs and when I click on the second image in the galleries list (not on Swiper's thumbnail) the Swiper runs on error:

Unhandled Runtime Error
TypeError: Cannot read property 'addClass' of undefined

Call Stack
Swiper.init
node_modules/swiper/esm/components/thumbs/thumbs.js (32:0)

There's my code:

import React, { useState } from "react";
import { Container, Row, Col, Modal, ModalBody } from "reactstrap";
import SwiperCore, { Navigation, Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";

SwiperCore.use([Navigation, Thumbs]); // docs says Swiper.use() but that's wrong... Navigation doesn't load here, but Thumbs module works

const GalleryModal = ({ images, isModalOpen, toggle, className }) => {
  const [thumbnailSwiper, setThumbnailSwiper] = useState(null);

  const gallerySwiperConfig = {
    grabCursor: true,
    spaceBetween: 10,
    thumbs: {
      swiper: thumbnailSwiper,
    },
  };

  const thumbnailSwiperConfig = {
    slidesPerView: 4,
    spaceBetween: 30,
  };

  const toggleWindowScrollbar = (overflowState) => {
    const html = document && document.querySelector("html");
    if (html) {
      html.style.overflowY = overflowState;
    }
  };

  return (
    <Modal
      isOpen={isModalOpen}
      toggle={toggle}
      className={className}
      centered
      autoFocus
      onOpened={() => toggleWindowScrollbar("hidden")}
      onClosed={() => toggleWindowScrollbar("auto")}
    >
      <ModalBody>
        <Swiper
          id="gallery-swiper"
          {...gallerySwiperConfig}
        >
          {images && images.length
            ? images.map((image, index) => (
                <SwiperSlide
                  key={`image-slide-${index}`}
                  virtualindex={`thumb-${index}`}
                >
                  <div
                    style={{
                      width: "100%",
                      height: 400,
                      backgroundSize: "cover",
                      backgroundImage: `url(${image})`,
                    }}
                  />
                </SwiperSlide>
              ))
            : null}
        </Swiper>

        <Swiper
          id="thumbnail-swiper"
          onSwiper={setThumbnailSwiper}
          {...thumbnailSwiperConfig}
          className="mt-4"
        >
          {images
            ? images.map((image, index) => (
                <SwiperSlide
                  key={`thumbnail-slide-${index}`}
                  virtualindex={`thumb-${index}`}
                >
                  <div
                    style={{
                      width: "100%",
                      height: 100,
                      backgroundSize: "cover",
                      backgroundImage: `url(${image})`,
                      cursor: "pointer",
                    }}
                  />
                </SwiperSlide>
              ))
            : null}
        </Swiper>

      </ModalBody>
    </Modal>
  );
};

export default GalleryModal;

Thank you.

[j3ll3yfi5h]

Same error after todays update – strange.

[SarkarKurdish]

been using swiper cdn for around a year just fine this error come out today out of nowhere had to roll back to older version

this version works fine:
https://unpkg.com/[email protected]/swiper-bundle.min.js

[j3ll3yfi5h]

@SarkarKurdish #4157

[misaon]

The same problem today. I think it's causing a change in "https://github.com/nolimits4web/Swiper/commit/9159d899ec93df6f34824f72a48699676ef20b13". In my case, only the "thumbs" will stop working. Rollback to version 6.4.8 works for me.