TypeError: this.nextPageLinkElement is null

[mitchclarkson]

Issue:

When not outputting the <a> tag when the paginate.next Liquid object is nil, as in the documentation...

<div id="AjaxinatePagination">
  {% if paginate.next %}
    <a href="{{ paginate.next.url }}">Loading More</a>
  {% endif %}
</div>

... the function addClickListener throws an error:
Uncaught TypeError: Cannot read property 'addEventListener' of null (Chrome)
TypeError: this.nextPageLinkElement is null (Firefox)

To reproduce:

1. Go to the 'endless click' demo page:
   https://ajaxinate.myshopify.com/collections/all?view=endless-click
2. Keep clicking 'Click to load more' until there are no more products to load
3. Error appears in console

Solution:

We cannot circumvent this behaviour by omitting the entire #AjaxinatePagination element when paginate.next is nil, as doing so stops the last page of products from loading. Instead, line 83 should be changed to account for null as well as typeof X !== undefined.

if (typeof this.nextPageLinkElement !== 'undefined') {

It appears this issue was fixed in releases 2.0.10 and 2.0.11 but crept back in in 3.0.0. See #28.

[Cam Gould]

@ThemuMitch Thanks for reporting this 👍

I think I know what happened here. We'll get a patch release up ASAP!

[Kelsey J Cooper]

Looks like this issue still exists

[Cam Gould]

Sorry about the delay on this. We've been pretty overwhelmed with the extra workloads during Covid.

@KelseyCooper This was fixed in 3.1, which was just published.

@ThemuMitch Thank you for your help with this.

Please note that the non-NPM browser version currently doesn't work as expected. We're in the process of creating a v4 to resolve those issues and add new more modular features and options.