Your problem here is that there is not default .carousel__buttons button.is-selected in your DOM. So at the first call, carouselButtonGroup.querySelector('.is-selected') will return null because there is no such element yet. You can easily fix that by providing the class is-selected to the first button of .carousel__buttons:

<div class="carousel__buttons">
  <button class="button is-selected" data-selector=".groupone">
    1984 to 1988
  </button>
  <button class="button" data-selector=".grouptwo">1989-1992</button>
  <button class="button" data-selector=".groupthree">1993-1999</button>
  <button class="button" data-selector=".groupfour">2000-2002</button>
  <button class="button" data-selector=".groupfive">2003-2005</button>
  <button class="button" data-selector=".groupsix">2006-2012</button>
  <button class="button" data-selector=".groupseven">2013-2020</button>
</div>

Checkout the Codepen.

I see on your Codepen it is still broken because you have repeating DIVs classes in your HTML:

<div class="carousel">
  <div class="carousel-cell groupone">
    <p>1984-1988</p>
    <p>Medicine River Wildlife ...</p>
  </div>
  <div class="carousel-cell groupone">
    <p>1984-1988</p>
    <p>Wildlife Rehabilitation was ...</p>
  </div>
  <div class="carousel-cell grouptwo">
    ...

For flickity to work right, each div needs to have a unique class name:

<div class="carousel">
  <div class="carousel-cell groupone">
    <p>1984-1988</p>
    <p>Medicine River Wildlife ...</p>
  </div>
  <div class="carousel-cell grouptwo">
    <p>1984-1988</p>
    <p>Wildlife Rehabilitation was ...</p>
  </div>
  <div class="carousel-cell groupthree">

and so on…

I am using Flickity to build a history timeline carousel for my client’s website. I have built a simplified demo on CodePen showing how it currently works and what needs adjustment.

CodePen demo

The demo was adapted from this CodePen

The areas that need adjusting are the buttons and having a is-selected class added when clicked or tapped by the user.

The following JS includes the code from the pen demo. The problematic code is commented out. If I enable the code, CodePen displays the following error TypeError: previousSelectedButton is null

For reference, the HTML template for the finished and working history timeline carousel will be:

<div class="carousel">
  <div class="carousel__timeline">
      <ul class="timeline__nav">
        <li class="timeline__item" data-year="1984" >
            <a href="#" id="1984" class="button button--year js-btn--year" data-group=".groupone"><span>1984 to 1988</span></a>
        </li>
        <li class="timeline__item" data-year="1989" >
            <a href="#" id="1989" class="button button--year js-btn--year" data-group=".grouptwo">1989 to 1992</a>
        </li>
        <li class="timeline__item" data-year="1993">
            <a href="#" id="1993" class="button button--year js-btn--year" data-group=".groupthree">1993 to 1999</a>
        </li>
        <li class="timeline__item" data-year="2000">
            <a href="#" id="2000" class="button button--year js-btn--year" data-group=".groupfour">2000 to 2002</a>
        </li>
        <li class="timeline__item" data-year="2003">
            <a href="#" id="2003" class="button button--year js-btn--year" data-group=".groupfive">2003 to 2005</a>
        </li>
        <li class="timeline__item" data-year="2006">
            <a href="#" id="2006" class="button button--year js-btn--year" data-group=".groupsix">2006 to 2012</a>
        </li>
        <li class="timeline__item" data-year="2013">
            <a href="#" id="2013" class="button button--year js-btn--year" data-group=".groupseven">2013 to 2020</a>
        </li>
      </ul>
  </div>
  <div class="carousel__content">
    {articles category="History" ordering="publish_up ASC" fixhtml="false"}
    <article class="carousel__cell [year-group]">
      [text]
              [year-group]
    </article>
    {/articles}
  </div>
  <div class="carousel__nav">
    <button class="button button--previous js-btn--previous">
        <svg width="18" height="18"><path d="M10.347 1.175L9.455.283a.96.96 0 0 0-1.362 0L.283 8.09a.96.96 0 0 0 0 1.362l7.81 7.81a.96.96 0 0 0 1.362 0l.892-.892a.965.965 0 0 0-.016-1.378L5.49 10.379h11.546c.534 0 .964-.43.964-.964V8.129a.962.962 0 0 0-.964-.964H5.49l4.84-4.612a.958.958 0 0 0 .017-1.378z" fill="#F7F7F7"/></svg>
    </button>
    <button class="button button--next js-btn--next">
        <svg width="18" height="18"><path d="M7.653 1.175l.892-.892a.96.96 0 0 1 1.362 0l7.81 7.806a.96.96 0 0 1 0 1.362l-7.81 7.81a.96.96 0 0 1-1.362 0l-.892-.892a.965.965 0 0 1 .016-1.378l4.841-4.612H.964A.962.962 0 0 1 0 9.415V8.129c0-.534.43-.964.964-.964H12.51L7.67 2.553a.958.958 0 0 1-.017-1.378z" fill="#F7F7F7"/></svg>
    </button>
  </div>
</div>

This code is working on the development site and exhibits the same errors when trying to apply a is-selected class to the navigation links.

JavaScript code

const utils = window.fizzyUIUtils;

const flkty = new Flickity(".carousel", {
  cellAlign: "left",
  contain: true,
  prevNextButtons: false,
  pageDots: false
});

const carouselButtonGroup = document.querySelector(".carousel__buttons");
const carouselButtons = utils.makeArray(carouselButtonGroup.children);

// update buttons on select
// flkty.on( 'select', function() {
//   const previousSelectedButton = carouselButtonGroup.querySelector('.is-selected');
//   const selectedButton = carouselButtonGroup.children[ flkty.selectedIndex ];
//   previousSelectedButton.classList.remove('is-selected');
//   selectedButton.classList.add('is-selected');
// });

carouselButtonGroup.addEventListener("click", function (event) {
  // Filter for button clicks
  if (!matchesSelector(event.target, ".button")) {
    return;
  }
  const selector = event.target.getAttribute("data-selector");
  // const index = carouselButtons.indexOf( event.target );
  // flkty.select( index );
  flkty.selectCell(selector);
});