Integrating carousel works, but unable to debug Reference errors

[wardourdigital]

I have set up a carousel lib called slide.js.

The process is:

1. Alpine init fetches data from a rss feed
2. A object called articles is populated
   3.$nextTick is called to initialise Splide.

It all works as expected. However, there are a bunch of Reference Errors. Likely it my limited understanding of Alpine. But I am unable to debug them.

init() {
  fetch("https://from.ncl.ac.uk/rss.xml")
    .then((response) => response.text())
    .then((data) => {
      let parser = new DOMParser();
      let xmlDoc = parser.parseFromString(data, "text/xml");

      let items = xmlDoc.getElementsByTagName("item");

      this.articles = [];

      for (let i = 0; i < items.length; i++) {
        this.articles.push(this.buildArticleItem(items[i]));
      }
      this.$nextTick(() => {
        this.startSplide();
      });
    });
}

Link with errors

I have been able to deduce that the errors appear after splide is initialised. By using a setTimeout. Beyond that I am a little stuck.

I would be grateful on solutions as to what is causing the errors.

Thank you