Uncaught Error: [splide] null is invalid

[stephenmeehanuk]

Hi

I'm seeing this error on pages where I'm not using Splide

site.js:342 Uncaught Error: [splide] null is invalid.
    at assert (site.js:342:11)
    at new _Splide (site.js:2449:5)
    at Module../resources/js/site.js (site.js:2941:12)
    at __webpack_require__ (site.js:3010:42)
    at site.js:3151:69
    at Function.__webpack_require__.O (site.js:3044:23)
    at site.js:3153:53
    at site.js:3155:12

My site.js looks like this

import Splide from "@splidejs/splide";
// new Splide(".splide").mount();

var main = new Splide("#main-slider", {
    type: "fade",
    rewind: true,
    pagination: false,
    arrows: false,
});

var thumbnails = new Splide("#thumbnail-slider", {
    fixedWidth: 100,
    gap: 10,
    arrows: false,
    rewind: true,
    pagination: false,
    focus: "center",
    isNavigation: true,
    breakpoints: {
        600: {
            fixedWidth: 60,
        },
    },
});

main.sync(thumbnails);
main.mount();
thumbnails.mount();

Is there something I can add to this to only run the script if Splide is on the page?

The error doesn't show on pages where I'm using Splide.

[NaotoshiFujita]

Grab the target element and check the existense first. If available, appliy Splide to the element.

[stephenmeehanuk]

Thanks, I was able to implement this solution

var splideCheck = document.getElementById("main-slider");
if (splideCheck) {
    console.log(`Splide is present`);

    var main = new Splide("#main-slider", {
        type: "fade",
        rewind: true,
        pagination: false,
        arrows: false,
    });

    var thumbnails = new Splide("#thumbnail-slider", {
        fixedWidth: 100,
        gap: 10,
        arrows: false,
        rewind: true,
        pagination: false,
        focus: "center",
        isNavigation: true,
        breakpoints: {
            600: {
                fixedWidth: 60,
            },
        },
    });

    main.sync(thumbnails);
    main.mount();
    thumbnails.mount();
} else {
    console.log(`Splide is NOT present`);
}

[inteltone]

Thanks a lot! This really helped.