Why Django JQuery Infinitescroll not working (Cannot set property 'Infinite' of undefined, Waypoint is not defined)

Question

I want to make an infinite scroll but it's not working and throws errors in the console:

Here is my HTML:

{% extends 'base.html' %}
{% load static %}
{% block imports %}

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

{% endblock imports %} 

{% block main %}
<h1 class="title">Was soll es denn heute geben?</h1>
<div class="all-recipes infinite-container" id="all-recipes">
  {% for recipe in queryset_recipes %}
  <div class="recipe-box infinite-item">
    <a href="{{recipe.get_absolute_url}}" class="recipe-link">
      <img src="{{recipe.images}}" alt="Rezept Bild" class="image" />
      <h3 class="recipe-title">{{recipe.title}}</h3>
    </a>
  </div>
  {% endfor %}
</div>
{% if page_obj.has_next %}
  <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}"></a>
{% endif %}
<div class="d-flex justify-content-center" style="display:none;">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>


{% endblock main %} 
{% block scripts %}
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
<script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
      }
    });
</script>
{% endblock scripts %}

And here are the Errors: 1.

infinite.min.js:57 Uncaught TypeError: Cannot set property 'Infinite' of undefined
    at infinite.min.js:57
    at infinite.min.js:58

(index):329 Uncaught ReferenceError: Waypoint is not defined
    at (index):329

I really hope that somebody could help me solving those errors because I have no idea why this is happening. Thank You!

Answer 1

You should have instead of

<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>

Next ordering:

<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/jquery.waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>

Pay attention to jquery.waypoints.min.js