Importing Swiper npm module into Laravel

Im trying to use a JavaScript library called Swiper which allows me to build carousels. I am not very familiar with npm modules and Laravel(v7.21.0) so I am having trouble properly importing all the dependencies. I have already run $ npm install swiper.

Currently I am receiving an error: Uncaught ReferenceError: Swiper is not defined

Here is the Swiper getting started page: https://swiperjs.com/get-started/

Swiper HTML

<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="{{ asset('imgs/slide1.jpg') }}" alt="vintage restored car" /></div>
    <div class="swiper-slide"><img src="{{ asset('imgs/slide2.jpg') }}" alt="vintage restored car" /></div>
    <div class="swiper-slide"><img src="{{ asset('imgs/slide3.jpg') }}" alt="vintage restored car" /></div>
    <div class="swiper-slide"><img src="{{ asset('imgs/slide5.jpg') }}" alt="vintage restored car" /></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Global styles which apply to all pages
@import 'global';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Custom
@import 'indexcontent';
@import 'indexheader';

// Swiper
@import '~swiper/swiper.scss';
@import '~swiper/swiper-bundle.css';

app.js

require('./bootstrap');

window.Swiper = require('swiper');

require('./swiper-index-photos');

swiper-index-photos.js

window.onload = function(){

    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
        },
        });
}

I cant wait to finally clear up my confusion on importing npm modules into Laravel, I've been trying for over 2 hours to get it to work but for whatever reason I simply cant. Thank you.

UPDATE: works when window.Swiper = require('swiper/swiper-bundle'); is used in app.js