#聞きたいこと
swiperを導入したのですが、swiperが起動しませんのでわかる方いましたらアドバイスをいただきたいです。
#各種ファイル
HTMLファイル

.swiper-container
    .swiper-wrapper
      .swiper-slide 
        %iframe{:allow => "accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture", :allowfullscreen => "", :frameborder => "0", :height => "300px", :src => "https://www.youtube.com/embed/QKGQPy1Q8jc", :title => "YouTube video player", :width => "100%"}
      .swiper-slide 
        %a{:href => "https://www.mod.go.jp/gsdf/jieikanbosyu/index.html"}
          .main-pic
    .swiper-pagination
    .swiper-button-prev
    .swiper-button-next
= javascript_pack_tag 'swiper.js'

swiper.js

const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

package.json

{
  "name": "sdf_app",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@rails/actioncable": "^6.0.0",
    "@rails/actiontext": "^6.0.3-4",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "axios": "^0.21.1",
    "bootstrap": "^4.5.3",
    "bootstrap-material-design": "^4.1.3",
    "fiber": "^1.0.4",
    "jquery": "^3.5.1",
    "node-sass": "^5.0.0",
    "popper.js": "^1.16.1",
    "rails-ujs": "^5.2.4-4",
    "sass": "^1.32.8",
    "swiper": "^6.7.0",
    "trix": "^1.2.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

application.js

//= require swiper/swiper-bundle.js

application.scss

@import 'swiper/swiper-bundle';

ツリー構造

root
|---app---javascript---packs---application.js
| |
| |---stylesheets---application.scss
|
|---node_modules---swiper-bundle.min.js
|
|---swiper-bundle.min.scss
#試したこと
sweiperが起動しない原因はパスの間違えが多いようなのですがパスは合っているはずだと思うので何か他の原因があると思いますので何かわかる方いましたら。アドバイスいただきたいです。
よろしくお願い致します。