Rails项目中提示owlCarousel is not a function的问题求助

核心问题分析 #

这个错误本质是Owl Carousel的JS代码未被正确加载到全局环境，或是初始化代码的执行时机不符合Turbo环境的要求，结合你的配置，主要存在以下几个问题：

1. 修复application.js的语法冲突 #

你在application.js中混合使用了ES模块import和Sprockets的//= require语法，这会导致Rails 7+环境下的加载顺序混乱，jQuery和Owl Carousel无法被正确挂载到全局window对象。

修改app/javascript/application.js，将Sprockets加载语句放在ES模块导入之前：

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

import "@hotwired/turbo-rails"
import "controllers"

2. 清理application.scss的无效配置 #

你的SCSS文件中混入了JS的//= require语句，这属于无效配置，会导致样式编译异常。修改app/assets/stylesheets/application.scss：

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

移除所有//= require相关的注释和代码，SCSS仅需用@import引入样式文件。

3. 适配Turbo的初始化时机 #

Turbo通过AJAX加载页面内容，传统的DOM就绪事件仅在首次加载时触发，后续Turbo导航时不会重新执行初始化代码。修改app/assets/javascripts/testimonials.js：

(function () {
  "use strict";

  var initCarousels = function () {
    // 先销毁已存在的实例，避免重复初始化报错
    if ($(".owl-carousel1").data('owl.carousel')) {
      $(".owl-carousel1").owlCarousel('destroy');
    }
    
    $(".owl-carousel1").owlCarousel({
      loop: true,
      center: true,
      margin: 0,
      responsiveClass: true,
      nav: false,
      responsive: {
        0: {
          items: 1,
          nav: false
        },
        680: {
          items: 2,
          nav: false,
          loop: false
        },
        1000: {
          items: 3,
          nav: true
        }
      }
    });
  };

  // 页面首次加载初始化
  $(document).ready(function() {
    initCarousels();
  });

  // 监听Turbo页面加载完成事件，重新初始化
  document.addEventListener('turbo:load', function() {
    initCarousels();
  });
})();

4. 移除视图中的重复脚本引入 #

你已经在application.js中通过//= require_tree .引入了app/assets/javascripts下的所有JS文件，因此无需在视图中再添加<%= javascript_include_tag "testimonials" %>，直接删除该行代码即可避免重复加载问题。

5. 验证加载状态 #

修改完成后重启Rails服务器，打开浏览器控制台检查：

• 在Network标签确认jQuery和owl.carousel的JS文件已成功加载
• 在控制台输入window.jQuery和window.jQuery.fn.owlCarousel，确认返回函数对象

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