Flickity: Uncaught TypeError: Cannot read property 'querySelectorAll' of null

I have been debugging my js codes for hours, I cannot remove the error. Did I miss anything or added some codes which are incorrect? The error says:

consultationSlider.js:9 Uncaught TypeError: cellsButtons.querySelectorAll is not a function at consultationSlider (consultationSlider.js:9) at HTMLDocument. (index.js:16)

Here are my codes:

JS

const consultationSlider = () => {
  
  const elem = document.querySelector('.consultation-slider');
  const cellsButtonGroup = document.querySelector('.consultation-slider__nav-wrap');
  const cellsButtons = cellsButtonGroup.querySelectorAll('.consultation-slider__nav'); 

  const flkty = new Flickity( elem, {
    pageDots: false,
    wrapAround: true,
    imagesLoaded: true,
    cellAlign: 'center'
  });

  // if(elem) {
  //   new Flickity( elem, {
  //     pageDots: false,
  //     wrapAround: true,
  //     cellAlign: 'center'
  //   });
  // }

  for (const [i, cellsButton] of cellsButtons.entries()) {
    cellsButton.addEventListener('click', function(event) {
      flkty.select( i );
    })
  }

 if (typeof NodeList.prototype.forEach !== 'function')  {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }
}

export default consultationSlider; SCSS

.consultation-slider {
  width: getvw(1200px);
  height: getvw(800px);
  @include sp {
    width: 100%;
    height: 100%;
  }

  &__cell {
    width: getvw(1200px);
    height: getvw(800px);
    @include sp {
      width: 100%;
      height: auto;
    }
  }

  &__nav {
    display: block;
    width: getvw(160px);
    height: getvw(108px);
    margin-top: getvw(10px);
    cursor: pointer;
    @include sp {
      width: getvw(230px);
      height: auto;
      margin-top: getsp375(10px);
    }
  }

  &__nav-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: getvw(1200px);
    @include sp {
      width: 100%;
    }
  }

  &__row {
    text-align: center;
    width: getvw(1200px);
    @include sp {
      width: 100%;
    }
  }

  .flickity-button-icon {
    display: none;
  }

  .next,
  .previous {
    height: 80px;
    width: 80px;
    border: 1px solid $white;
    border-radius: 0;
    background: transparent;
    @include sp {
      display: none;
    }

    &::before {
      content: '';
      position: absolute;
      width: 11px;
      height: 18px;
      bottom: 50%;
      transform: translateX(-50%) translateY(50%);
      background: {
        image: url('/img/icons/slider-arrow.png');
        size: 100%;
        repeat: no-repeat;
      }
      @include sp {
        display: none;
      }
    }
  }

  .previous {
    &::before {
      transform: rotate(180deg) translateX(50%) translateY(-50%);
    }
  }
}

PUG

.consultation-slider
  img.consultation-slider__cell(src='/img/gray-bg-small.jpg')
  img.consultation-slider__cell(src='/img/gray-bg-small.jpg')
  
.consultation-slider__button-row
  .consultation-slider__nav-wrap
    img.consultation-slider__nav(src='/img/gray-bg-small.jpg')
    img.consultation-slider__nav(src='/img/gray-bg-small.jpg')

my code is running before the dom elements exist on the page so when it attempts to query the page for the elements the result is null i ensured my code executes after dom load so I added if statement here:

const consultationSlider = () => { const elem = document.querySelector('.consultation-slider');

if(elem) { const flkty = new Flickity( elem, { pageDots: false, wrapAround: true, imagesLoaded: true, cellAlign: 'center' }); const cellsButtonGroup = document.querySelector('.consultation-slider__nav-wrap'); const cellsButtons = cellsButtonGroup.querySelectorAll('.consultation-slider__nav'); for (const [i, cellsButton] of cellsButtons.entries()) { cellsButton.addEventListener('click', function(event) { flkty.select( i ); }) } } }

export default consultationSlider;