Как исправить ошибку «Uncaught ReferenceError: $ is not defined» хотя jQuery подключен?

Question

[I_want_to_know]

Уважаемые знатоки, подскажите, как поправить ошибку "Uncaught ReferenceError: $ is not defined" jQuery подключен точно, локально.
Делаю счетчик

//--------------------------------
var iObserver = new IntersectionObserver(
  function (entries) {
    if (entries[0].isIntersecting === true) {
      setTimeout(() => {
        updateCount();
      }, 1000);
      iObserver.unobserve(entries[0].target); // перестаём отслеживать видимость
    }
  },
  { threshold: [0] }
);
if ($(".values").length) {
  iObserver.observe(document.getElementById("count"));
}

function updateCount() {
  $(".values").spincrement({
    thousandSeparator: "",
    duration: 4200,
  });

  var i = 0;
  if (i == 0) {
    i = 1;
    var width = 1;
    var id = setInterval(frame, 20);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        if (width == 5) {
          $(".benefits__title").addClass("new-cube");
          //setTimeout( () => {
          $(".benefits__title").removeClass("new-cube");
          //}, 2000);
        }
      }
    }
  }
}

Вот html:

<section class="count count-section">
  <div class="container">
    <h2 class="count-name">О нас в цифрах</h2>
    
    <div class="countdown">
      <!-- Всего прйдено конкурсов финиш -->

      <div class="counter-home counter__willBe">
        <div class="count-title values" style="opacity: 1">16</div>
        <p class="count-text">Дня до ближайшего конкурса</p>
      </div>

      <div class="counter-home counter__was">
        <div class="count-title values" style="opacity: 1">35</div>
        <p class="count-text">Всего конкурсов было</p>
      </div>

      <div class="counter-home counter__participants">
        <div class="count-title values" style="opacity: 1">1286</div>

        <p class="count-text">Счастливых участников</p>
      </div>
    </div>
  </div>
</section>

Вот такая ошибка вылазит:

Comments

[Everything_is_bad]

показывай как подключен jQuery

[VoidVolker]

Вот такая ошибка вылазит:

Появляется где именно?

[alexalexes]

А зачем в таких простых случаях вам JQuery?
$(".values")
Тут справится:
document.querySelector(".values")
А тут:
$(".benefits__title").addClass("new-cube");
будет так:

document.querySelector(".benefits__title").classList.add("new-cube")

[sergski]

а где у вас id="count"?

[I_want_to_know]

Everything_is_bad,
В общем html + подключение скриптов:

<section class="count count-section">
  <div class="container">
    <h2 class="count-name">О&#160;нас в&#160;цифрах</h2>

    <div class="countdown">
      <!-- Всего прйдено конкурсов финиш -->

      <div class="counter-home counter__willBe">
        <div class="count-title values" style="opacity: 1">16</div>
        <p class="count-text">Дня до&#160;ближайшего конкурса</p>
      </div>

      <div class="counter-home counter__was">
        <div class="count-title values" style="opacity: 1">35</div>
        <p class="count-text">Всего конкурсов было</p>
      </div>

      <div class="counter-home counter__participants">
        <div class="count-title values" style="opacity: 1">1286</div>

        <p class="count-text">Счастливых участников</p>
      </div>
    </div>
  </div>
</section>

    </main>
    <footer class="footer">
    <div class="container-full">
        <div class="footer__copyright">
            
        </div>
    </div>
</footer>

    <script src="./js/jquery.js"></script>
    <script src="./js/count.js"></script>

    <script src="./js/index.js"></script>
    <script src="./js/tabs.js"></script>

Сам код счетчика:

//--------------------------------
var iObserver = new IntersectionObserver(
  function (entries) {
    if (entries[0].isIntersecting === true) {
      setTimeout(() => {
        updateCount();
      }, 1000);
      iObserver.unobserve(entries[0].target); // перестаём отслеживать видимость
    }
  },
  { threshold: [0] }
);
if ($(".values").length) {
  iObserver.observe(document.getElementById("count"));
}

function updateCount() {
  $(".values").spincrement({
    thousandSeparator: "",
    duration: 4200,
  });

  var i = 0;
  if (i == 0) {
    i = 1;
    var width = 1;
    var id = setInterval(frame, 20);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        if (width == 5) {
          $(".benefits__title").addClass("new-cube");
          //setTimeout( () => {
          $(".benefits__title").removeClass("new-cube");
          //}, 2000);
        }
      }
    }
  }
}

CSS еще не накидывал.

[I_want_to_know]

alexalexes,
Всё супер!
Ошибка реально уходит!
Но проблема в том, что счетчик не работает... И после перезагрузки страницы.
Идея вот в чем:
Когда доскроливаю до этого счетчика, цифры автоматом считаются от нуля до указанного значения.

[I_want_to_know]

VoidVolker, ошибка видна в DevTools

Answer 1

[Сергей delphinpro]

Порядок подключения скриптов имеет значение.
Порядок загрузки скриптов тоже имеет значение.

Answer 2

[David Gegiya]

Можно попробовать заменить значок доллара на jQuery. То есть у Вас вместо
$(".values").length
Будет
jQuery(".values").length

Это актуально для тех случаев, когда у jQuery идут конфликты за знак $ с другими библиотеками. Но, конечно же, такой подход не решит отсутствие подключения самой библиотеки.
А $ - это по сути просто альяс для функции jQuery:
https://api.jquery.com/jQuery.noConflict/

Answer 3

[I_want_to_know]

В общем, задачу я решил, но не совсем понимаю проблему.
моё решение: подключил jquery через cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

И всё заработало...
Предположил, что сам jquery.min.js у меня косячный, скопировал содержимое, подключил локально и опять увидел ошибку.
В общем так и не понял в чем истинная причина, но проблема решена.