Trouble installing & initializing Flickity (or any non-integrated npm package) | Astro Lounge | Page 1

Someone in a support post here recommended using Flickity with Astro to create sliders / carousels. I installed Flickity with npm install flickity and created a component to initialize my Flickity carousel per the Flickity 'Getting started' notes: https://flickity.metafizzy.co. However, I keep getting the window is not defined error:

( window, function factory() {
     ^

ReferenceError: window is not defined
    at Object.<anonymous>

My component code and page code are below. Can anyone help me figure out what I'm missing / getting wrong here?

Carousel component

<h1>Flickity - wrapAround</h1>

<!-- Flickity HTML init -->
<div class="main-carousel" data-flickity='{ "wrapAround": true }'>
  <div class="carousel-cell">1</div>
  <div class="carousel-cell">2</div>
  <div class="carousel-cell">3</div>
  <div class="carousel-cell">4</div>
  <div class="carousel-cell">5</div>
</div>

<script>
  import Flickity from "flickity";

  var elem = document.querySelector(".main-carousel");
  var flkty = new Flickity(elem, {
    // options
    cellAlign: "left",
    contain: true,
  });

</script>

<style>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: sans-serif;
  }

  .main-carousel {
    background: #eee;
  }

  .carousel-cell {
    width: 66%;
    height: 200px;
    margin-right: 10px;
    background: #8c8;
    border-radius: 5px;
    counter-increment: carousel-cell;
  }

  /* cell number */
  .carousel-cell:before {
    display: block;
    text-align: center;
    content: counter(carousel-cell);
    line-height: 200px;
    font-size: 80px;
    color: white;
  }
</style>

Page

---
import Carousel from "../components/Carousel.astro";
---

<LayoutMain title="Home">
    <Carousel client:load />
</LayoutMain>

#Trouble installing & initializing Flickity (or any non-integrated npm package)