Интеграция jQuery в Rails 6 (Uncaught TypeError ... не является функцией)

Question

Я новичок в Rails, и после целого дня застрял, не найдя ответа на этом форуме, вот я с моим первым вопросом о переполнении стека!

Я изо всех сил пытаюсь интегрировать это jQuery код в мой проект Rails 6, чтобы иметь динамическую c прокрутку и прикрепление заголовков. Код работает хорошо сам по себе (я пробовал его локально в другой папке), а основная c jQuery функция, такая как этот , работает в моем приложении Rails.

Консоль выдает следующую ошибку:

jquery-3.2.1.min.js:2 Uncaught TypeError: $(...).stickyMultiHeader is not a function
at HTMLDocument.<anonymous> (test:112)
at j (jquery-3.2.1.min.js:2)
at k (jquery-3.2.1.min.js:2)

Я добавил console.log(*) в файл. js из github, чтобы проверить 2 вещи, и они оба работают:

1. Правильно ли импортирован файл. js с приложением? js => Да
2. Правильно ли я получаю файл jquery. js с <script><src> в файл html => Да (я вижу это в консоли)

Тем не менее, основная функция в файле js не читается (это stickyMultiHeader). Я пробовал несколько отладить, например, порядок различных //= require в приложении. js, но это не помогает.

Любые советы о том, что попробовать после отладки, были бы очень полезны!

Большое спасибо,

Laurent

Вот файлы:

приложение. js

//= require jquery3
//= require jquery_ujs
//= require bootstrap.min
//= require_tree .

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "bootstrap";
import { initAjaxScroll, preserveTab } from '../plugins/ajax_scroll';
import { stackedBar } from '../plugins/bar_chart';
import { initToolTip } from '../components/init_tooltip';
import '../plugins/dropdown_dashboard';
import { initSubmit } from '../plugins/submit';
import { dropdownSelected } from '../plugins/dropdown_dashboard';
import { activeQueryDashboard} from '../plugins/tab-dashboard';
// import { testJs } from '../plugins/test-jquery';
import '../plugins/sticky_multi_headers';

initAjaxScroll();

document.addEventListener('turbolinks:load', function () {
  if (document.getElementById('mybarChart')) {
    stackedBar();
  }
  initToolTip();
  initSubmit();
  preserveTab();
  dropdownSelected();
  activeQueryDashboard();
}, false);

plugin / sticky_multi_headers. js (без изменений, кроме console.log для отладки)

// Sticky Multi Header Scroll Plugin
// Author: Samson.Onna <Email : samson3d@gmail.com>

  console.log("test");
  console.log($);
  (function ($) {
    $.fn.extend({
        stickyMultiHeader: function (options) {
        //Set the default values, use comma to separate the settings, example:
            var defaults = {
                scrollAnimation: 1000
            }
            //Variables
            var options = $.extend(defaults, options),
                opt = options,
        sAnimation = opt.scrollAnimation,
          sHeight = opt.height,
        sWidth = opt.width;

            //Main function
            this.each(function () {
                var $stickyHeader = $(this),
                    $mainSidebar = $stickyHeader.find(".stickyMainContainer"),
          $header = $stickyHeader.find(".stickyHeader"),
          $navLink = $stickyHeader.find('.stickyNavLink'),
          $tabContainer = $stickyHeader.find(".stickyTabContainer"),
          headLength = $header.length;
          console.log("test4");

          if(sHeight){
            $mainSidebar.height(sHeight +"px")
                .width(sWidth +"px");
          }
          var containerWidth = $mainSidebar.width();
          $stickyHeader.width(containerWidth +"px")
          for (i = 0; i < headLength; i++) {
            $header.eq(i).after('<div class="stickyHedBtm"></div>');
          }
          var $hedBtm = $stickyHeader.find(".stickyHedBtm");
        //On Load - Scroll Reset to Top
          $mainSidebar.scrollTop(0);
        //On Scroll Event Fire
        $mainSidebar.on("scroll", function(e) {
          for (i = 0; i < headLength; i++) {
            var thisHead = $header.eq(i),
              hedBtmPos, topMrg, hedHeight;
            hedHeight = $header.outerHeight();
            hedBtmPos = hedHeight * (i + 1);
            topMrg = hedHeight * i;
            if (i == 0) {
              topMrg = 0;
            }
            thisHead.attr("data-id", (i + 1));
            if (thisHead.next($hedBtm).position().top < hedBtmPos) {
              $(thisHead).addClass("stickyFix")
                     .css("top", topMrg + "px")
                     .next().next($tabContainer).css("margin-top", hedHeight+"px");
            } else {
              $(thisHead).removeClass("stickyFix")
                     .css("top", "0")
                     .next().next($tabContainer).css("margin-top","0px");
            }
          }
          //NavLink Click Event
          $navLink.click(function(event) {
            var contLength = $(this).parent($header).attr('data-id')-1,
              offsetValue = 0;
            for (j = 0; j < contLength; j++) {
              offsetValue += $tabContainer.eq(j).outerHeight();
            }
            //console.log(offsetValue);
            event.preventDefault();
            $mainSidebar.stop().animate({
              scrollTop: offsetValue
            }, sAnimation);
          });

        });

            });
        }
    });
})(jQuery);

console.log("test");

тест. html .erb

<div class="stickyWrapper" id="stickyHeaderScroll">
  <div class="stickyMainContainer">

    <div class="stickyHeader">
      <h2>stickyHeader 001</h2>
      <a href="#" class="stickyNavLink">Link</a>
    </div>

    <div class="stickyTabContainer">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
 </div>

<!--Scripts-->
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script>
 $(document).ready(function(){
  $('#stickyHeaderScroll').stickyMultiHeader({
    scrollAnimation: 600,
  });
});
</script>