Uncaught ReferenceError: Glide is not defined - Although Glide loaded in app.js like all others

Question

In a Laravel 9 project I am loading Glide.js via my app.js file:

import "./bootstrap";
import flatpickr from "flatpickr";
import Alpine from "alpinejs";
import Glide from "@glidejs/glide";

window.Alpine = Alpine;
window.flatpickr = flatpickr;
Alpine.start();

If I initialise the Glide object in the same file with:

new Glide(".glide", {hoverpause:true, autoplay:2000}).mount();

It works ok on the page I want it on, however it stops Alpine working on other pages. I assumed that by adding it to the Window object

window.Glide = Glide;

I could simply declare it on the page I want it but I get the

Uncaught ReferenceError: Glide is not defined error.

I've also tried importing via cdn in a script tag placed on my home view

   <script src="https://unpkg.com/@glidejs/[email protected]/dist/glide.js"></script>
    <script>
        new Glide(".glide", {
            hoverpause: true,
            autoplay: 2000,
            perView: 3,
        }).mount();
    </script>

But this tells me that [Glide warn]: Root element must be a existing Html node and doesn't work either.

Js isn't my strong suit by a long shot and I have a lot to read up on and learn but would somebody be so kind as to give me some pointers?

Thanks in advance.

Answer 1

I solved this issue by only instanciating the Glide object if the target element exists.

if (document.querySelector(".glide") !== null) {
    new Glide(".glide", {
        hoverpause: true,
        autoplay: 2000,
        perView: 3,
    }).mount();
}