Firefox/Safari bug: multiple instances of the component

[erip2]

I'm using Alpine for the first time. I am building a WordPress theme with Sage 10. Everything is working as it should on Chrome, but I started testing on the other browsers and they all have an issue.

Basically what I'm doing with Alpine in this case is a dynamic section on the homepage. Depending on the data I get from the back-end, I show a view with that data. My HTML markup is like this:

<div x-data="dynamicSection" x-init="getDynamicSection">
  <div x-html="data"></div>
</div>

dynamicSection is a JS object which has the getDynamicSection function, which in itself calls an async function and in the end it does this: this.data = dataWeGetFromAsync;.

In Chrome, everything works fine. The data arrives and then the section is shown.

But something strange happens on the other browsers. getDynamicSection is called multiple times and the weirdest thing is that the dataWeGetFromAsync is not the section HTML I expect, it's the site HTML. After being called multiple times, in the end, is called with the data I ask, and the section is shown. Even that section is shown multiple times.

Here's how it looks on AlpineJS devtools: https://prnt.sc/1yfdqrv
While in Chrome it looks ok: https://ibb.co/LYmMpjs

What is happening here? Does anyone has come across this before?

Thanks!

[danddanddand]

Hard to know without seeing the js data object. Do you have a function called init defined as well? Could be trying to initialize twice? Share a minimal codepen with it reproduced if possible.

[erip2]

Yeah, sorry. Here's the data object:

export default () => ({
  data: '',

  async getSectionHtml() {
    const formdata = new URLSearchParams();
    formdata.append('action', 'get_home_section');

    const fetchData = {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: formdata.toString(),
    };

    const response = await fetch(window.ajaxUrl, fetchData);
    return response.text();
  },

  getDynamicSection() {
    const _this = this;

    this.getSectionHtml().then((data) => {
      if (data === '0') {
        // If no data, show Virtual Appointment section
        _this.showVirtualAppointment();
        return;
      }

      this.data = data;
    });
  },

  showVirtualAppointment() {
    const virtualAppointmentSection = document.querySelector(
      '.js-home-virtual-appointment'
    );

    if (virtualAppointmentSection) {
      virtualAppointmentSection.classList.remove('hidden');
    }
  },
});

[erip2]

Update:

It seems that this is an issue with WP Rocket cache plugin. After I disabled it everything works ok. I don't really know what it does that could cause this.

Anyway, would leave this issue for others that may occur this problem. When I find where's the problem and what is the solution, I will update it here.