Uncaught TypeError: Cannot read property 'querySelector' of undefined

[pbmills]

I am not sure why I kept getting error Uncaught TypeError: Cannot read property 'querySelector' of undefined

Error which I am getting on other pages where I am not using Glide.js

Install the Glide JS via NPM Modules.

my JS Code

import Glide from '@glidejs/glide';

new Glide(document.querySelector('.glide'), {
    arrows: {
      prev: '.glider-prev',
      next: '.glider-next'
    },
    type: 'carousel',
    animationDuration: 1000,
    // autoplay: 3500,
    focusAt: '1',
    startAt: 3,
    perView: 1, 
  }).mount();

My Frontend Demo code

{% import 'macros' as macros %}
<div class="glide">
        <div class="glide__arrows" data-glide-el="controls" >
          <div data-glide-dir="<">
            {{ macros.icon("custom/arrow-left", "glide__arrow glide__arrow--left text-blue md:type-2xl")  }}
          </div> 
        </div>
        <div class="glide__track" data-glide-el="track">
           <ul class="glide__slides w-full h-132">
            <li class="glide__slide w-full flex"><img class="m-auto w-auto max-h-inherit " src="https://source.unsplash.com/random"  /></li>
            <li class="glide__slide w-full  flex"><img class="m-auto w-auto max-h-inherit" src="https://source.unsplash.com/random"  /></li>
            <li class="glide__slide w-full  flex"><img class="m-auto w-auto max-h-inherit" src="https://source.unsplash.com/random"   /></li>
            <li class="glide__slide w-full  flex"><img class="m-auto w-auto max-h-inherit " src="https://source.unsplash.com/random"   /></li>
            <li class="glide__slide w-full  flex"><img class="m-auto w-auto max-h-inherit " src="https://source.unsplash.com/random"   /></li>
            </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls" >
          <div data-glide-dir=">">
            {{ macros.icon("custom/arrow-right", "glide__arrow glide__arrow--right text-blue md:type-2xl")  }}
          </div> 
        </div>
      </div>

[tomasvn]

new Glide('.glide', {
    arrows: {
      prev: '.glider-prev',
      next: '.glider-next'
    },
    type: 'carousel',
    animationDuration: 1000,
    // autoplay: 3500,
    focusAt: '1',
    startAt: 3,
    perView: 1, 
  }).mount();

.glide should be string, you dont have to use document.querySelector('.glide')

See example https://glidejs.com/docs in the introduction