Не работает swiper через webpack

Frontend developer JavaScript
1

не работает swiper при подключении через webpack. В html после сборки он виден, точки пагинации есть, но при кликах не срабатывают, слайды не перелистываются

html:

<div class="brand-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img/lenovo.svg" />
      <button tabindex="1" aria-label="Open section lenovo" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
    </div>
    <div class="swiper-slide">
      <img src="img/samsung.svg" />
      <button tabindex="2" aria-label="Open section samsung" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
    </div>
    <div class="swiper-slide">
      <img src="img/apple.svg" />
      <button tabindex="3" aria-label="Open section apple" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
    </div>
    <div class="swiper-slide">
      <img src="img/bosh.svg" />
      <button tabindex="4" aria-label="Open section bosh" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
    </div>
    <div class="swiper-slide">
      <img src="img/hp.svg" />
      <button tabindex="5" aria-label="Open section hp" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
    </div>
    <div class="swiper-slide hide-m">
      <img src="img/acer.svg" />
      <button tabindex="6" aria-label="Open section acer" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
    </div>
    <div class="swiper-slide hide-m">
      <img src="img/viewsonic.svg" />
      <button tabindex="7" aria-label="Open section viewsonic" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
    </div>
    <div class="swiper-slide">
      <img src="img/sony.svg" />
      <button tabindex="8" aria-label="Open section sony" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
    </div>
    <div id="contentSpoilerBrand">
      <div class="open_slider_brand">
        <div class="swiper-slide">
          <img src="img/lenovo.svg" />
          <button tabindex="9" aria-label="Open section lenovo" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
        </div>
        <div class="swiper-slide hide-s">
          <img src="img/samsung.svg" />
          <button tabindex="10" aria-label="Open section samsung" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
        </div>
        <div class="swiper-slide hide-s">
          <img src="img/apple.svg" />
          <button tabindex="11" aria-label="Open section apple" type="button" class="brand_slider-button"><span><img src="img/arrow.svg" class="arrow"></span></button>
        </div>
      </div>
    </div>
    <a href="javascript:SpoilerBrand();" class="link_spoiler__brand" id="linkSpoilerBrand">Показать все</a>
    <div class="swiper-pagination"></div>
  </div>
</div>

css:

.swiper-wrapper {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-left: 16px;
  margin-bottom: 24px;
}

.swiper-slide {
  width: 220px;
  height: 72px;
  border-radius: 6px;
  border: 1px solid #EAEAEA;
  background-color: white;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 16px 0 16px;
}

.brand_slider-button {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 20px;
  border: 2px solid #ff3e79;
  padding-top: 4px;
  padding-left: 8px;
}

.brand_slider-button:hover {
  cursor: pointer;
}

.arrow {
  width: 8px;
  height: 12px;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}

js:

import '../scss/style.scss';
import Swiper, {
  Pagination
} from 'swiper';
import 'swiper/modules/pagination/pagination.scss';

var init = false;

function swiperCard() {
  if (window.innerWidth <= 768) {
    if (!init) {
      init = true;
      swiper = new Swiper('.brand-swiper', {
        modules: [Pagination],
        loop: true,
        spaceBetween: 16,
        slideClass: 'swiper-slide',
        pagination: {
          el: '.swiper-pagination',
          tupe: 'bullets',
          clickable: true
        },
        slidesPerView: 'auto'
      });
    }
  } else if (init) {
    swiper.destroy();
    init = false;
  }
}
swiperCard();
window.addEventListener("resize", swiperCard);