javascript error in the console that prevents the rest of the javascript from working

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?

Answer

You need to check if your elements are present in the dom or not :

if(document.querySelector('#splideEvents')) {
    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
            }
        }
    } );

}

if they are not you don’t do anything because there is no slide in the page