index.js:1 Uncaught ReferenceError: Swiper is not defined

Question

I am not quite familiar with using import/export but I am trying to learn it. Now I am facing a problem.

I have two JS files, core.js and index.js. Core is used on every page, index on home page. When I import swiper in core.js I assume that I can also use it in index.js but it doesn't work. I get the following error:

index.js:1 Uncaught ReferenceError: Swiper is not defined.

When I copy and paste the import statement from core.js into index.js it works but I don't think that is the correct solution because of the duplicate imports + extra file size for index.js. Can anyone help me out?

core.js

import Swiper from 'swiper/bundle';
import 'swiper/swiper-bundle.css';

const uspSlider = new Swiper('.uspSlider', {
    centeredSlides: true,
    slidesPerView: 1.5,
    spaceBetween: 15,
    loop: true,
    speed: 2500,
    autoplay: {
        delay: 0,
        disableOnInteraction: false,
    },
    breakpoints: {
        992: {
            centeredSlides: false,
            autoplay: {
                delay: 1000,
                disableOnInteraction: true,
            },
            slidesPerView: 4,
            loopedSlides: 5,

        }
    }
});

index.js

const slider = new Swiper('.projectSlider', {
    autoplay: {
        delay: 2500,
    },
    speed: 500,
    centeredSlides: true,
    loop: true,
    spaceBetween: 0,
    slidesPerView: 1.3,
    breakpoints: {
        992: {
            centeredSlides: false,
            slidesPerView: 4,
            spaceBetween: 30,
        }
    }
});