Squarespace is not defined

So, for context im building a page that displays all the users current active Member Area subscriptions

To this end ive injected the following code block into the page:

<script>
  var memberAreas = [];
  var memberships = Squarespace.Commerce.Customer.memberships();
  for (var i = 0; i < memberships.length; i++) {
    var membership = memberships[i];
    memberAreas.push(membership.memberArea.title);
  }
 
  var pTag = document.getElementById("myP");
  var memberAreaArr = document.getElementById("memberArrLength");
  var memberArea = memberAreas[0];
  if (memberAreas.length === 0) {
    ptag.innerHTML = "No Active Memberships";
  } else {
    ptag.innerHTML = memberArea;
    memberAreaArr.innerHTML = memberAreas.length;
  }
  console.log(memberships)
</script>

However, when i attempt to call the Squarespace API on the second line var memberships = x i get an uncaught reference error saying "Squarespace is not defined". Ive attempted to inject these 2 lines of code into both the site wide and page wide headers to no avail:

<script src="https://cdn.squarespace.com/static/embed/js/6.5.0/Squarespace.min.js"></script>

<script src="https://unpkg.com/squarespace-js@latest/dist/squarespace.min.js"></script>

I would greatly appriciate any help or pointers that may lead me in the right direction 🙂

EDIT 1: I should also mention that when i attempt to inject these packages site or page wide the GET request returns a net::ERR_ABORTED 404 error.

Your code is probably running before Squarespace has been defined.

You don't need to be loading scripts or packages but restructure your code to wait until Squarespace has been defined.

I suggest DOMContentLoaded as a first stop. Not sure that will do what you need.

Let us know how it goes.