Swiper 8 with Webpack 5: Class not defined

Question

I'm trying to use Swiper 8 with Webpack 5.

In my Webpack config i defined two entry points:

module.exports = {
    entry: {
        vendor: './vendor.js',
        frontend: './frontend.js',
    }
    ...
}

In the vendor.js I've imported Swiper:

import 'swiper/scss';
import Swiper from 'swiper';

In the frontend.js I've imported my script files:

import './custom.js'

No i try to initalize Swiper in my custom.js:

const swiper = new Swiper('.swiper', {});

Here I get an error message:

Uncaught ReferenceError: Swiper is not defined

In my HTML file, I import the vendor.js before the frontend.js file. Theoretically, the Swiper class should be available to me. What am I doing wrong?

<script type="text/javascript" src="/dist/vendor.js"></script>
<script type="text/javascript" src="/dist/frontend.js"></script>

Answer 1

You will need to

import Swiper from 'swiper';

inside your custom.js , because, even though it is properly imported in frontend.js , it's not imported in custom.js and it is not seen there.