Rails应用中出现owlCarousel is not a function错误求助

在Rails应用中尝试用owl carousel展示带图片的客户评价列表，配置后控制台持续提示“owlCarousel is not a function”错误，当前配置信息如下：

1. Gemfile配置 #

gem 'owlcarousel-rails'

2. app/assets/javascripts/application.js配置 #

import "@hotwired/turbo-rails";
import "controllers";
import 'owl.carousel';

//= require_tree .
//= require jquery
//= require owl.carousel
//= require jquery_ujs
//= require turbolinks

3. app/assets/stylesheets/application.scss配置 #

@import "bulma";
@import "font-awesome";
@import "owl.carousel";
@import "../stylesheets/main/main.scss";

 *
 //= require jquery
 //= require jquery_ujs
 *= require_self
 *= require owl.carousel
 */

4. 轮播视图文件app/views/main/index.html.erb #

<section class="testimonials-carousel-container">
  <div class="testimonials-carousel">
    <div id="owl-carousel">
      <div class="carousel-of-images">
        <div class="carousel-image">Item</div>
        <div class="carousel-image">Item</div>
        <div class="carousel-image">Item</div>
        <div class="carousel-image">Item</div>
        <div class="carousel-image">Item</div>
      </div>
      <div class="gradient-left"></div>
      <div class="gradient-right"></div>
    </div>
  </div>
</section>

5. 轮播控制文件app/assets/javascripts/testimonials.js #

$(document).ready(function () {
  $("#owl-carousel").owlCarousel();
});

6. 视图底部引入脚本 #

<%= javascript_include_tag "testimonials" %>

问题排查与修复方案 #

1. 修复JavaScript加载语法冲突

同时使用ES模块import和Sprockets的//= require会导致加载顺序混乱，Owl Carousel无法正确绑定到jQuery。统一使用Sprockets语法，修改application.js：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require owl.carousel
//= require controllers
//= require_tree .

注意：必须先加载jQuery，再加载Owl Carousel，最后加载自定义脚本

2. 清理Stylesheets中的无效内容

样式文件中不需要引入jQuery的require规则，且注释格式错误，修改application.scss：

@import "bulma";
@import "font-awesome";
@import "owl.carousel";
@import "../stylesheets/main/main.scss";

3. 适配Turbolinks/Turbo加载机制

$(document).ready()无法适配Turbolinks页面跳转，替换为框架对应的加载事件：

// 针对Turbo Rails（Rails 7+）
document.addEventListener('turbo:load', function() {
  $("#owl-carousel").owlCarousel({
    // 可添加自定义配置，示例：
    items: 3,
    loop: true,
    margin: 15
  });
});

// 针对旧版Turbolinks（Rails 6及以下）
// document.addEventListener('turbolinks:load', function() {
//   $("#owl-carousel").owlCarousel();
// });

4. 移除重复的脚本引入

//= require_tree .已经会加载testimonials.js，删除视图底部的javascript_include_tag "testimonials"，避免重复加载冲突。

5. 验证依赖加载状态

打开浏览器控制台的Network标签，确认：

• jQuery和owl.carousel.js均成功加载（无404错误）
• jQuery加载顺序早于owl.carousel.js

内容的提问来源于stack exchange，提问作者Misha Krul