I'm doing a project for my courses on symfony, I use webpack and the "slidejs" library to make carousels. Everything works fine on the page where I use splide but on the other pages where it's not used I get an error message in the console and all the rest of my javascript doesn't work anymore

Error: https://i.stack.imgur.com/x21fr.png

I'm importing the splide.js file into my app.js, my splide configuration looks like this

// Splide

// Last news
import Splide from '@splidejs/splide';
let splideEvents = new Splide( '#splideEvents', {
    classes: {
        arrow : 'splide__arrow bg-primary',
    },
    type: 'splide',
    perPage: 4,
    perMove: 1,
    gap: '10px',
    pagination: false,
    breakpoints: {
        992: {
            perPage: 2
        },
        500: {
            perPage: 1,
            gap: 0
        }
    }
} );
splideEvents.mount();


let splideNews = new Splide( '#splideNews', {
    classes: {
        arrow : 'splide__arrow bg-primary',
    },
    type: 'splide',
    perPage: 4,
    perMove: 1,
    gap: '10px',
    pagination: false,
    breakpoints: {
        992: {
            perPage: 2
        },
        500: {
            perPage: 1,
            gap: 0
        }
    }
} );
splideNews.mount();

let splideReleases = new Splide('#splideReleases', {
    classes: {
        arrow : 'splide__arrow bg-primary',
    },
    type: 'splide',
    perPage: 4,
    perMove: 1,
    gap: '10px',
    pagination: false,
    breakpoints: {
        992: {
            perPage: 2
        },
        500: {
            perPage: 1,
            gap: 0
        }
    }
})
splideReleases.mount();

Any ideas how to resolve this?