Rails 6项目中jQuery与ActiveAdmin冲突问题求助

环境信息 #

• Ruby：2.7.6
• Rails：6.1.3
• 资源管理：Asset Pipeline（无需关注Webpacker）

问题概述 #

项目出现jQuery相关错误，已定位为ActiveAdmin导致。尝试调整application.js中jQuery与active_admin/base的加载顺序后，问题仍未解决。

当前配置 #

原始application.js #

//= require active_admin/base
//= require jquery
//= require jquery-ui
//= require turbolinks
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require filter_bar
//= require filter_box
//= require nested_form_fields
//= require bootstrap-select.min
//= require tinymce
//= require parsley
//= require raphael-2.1.0.min
//= require morris
//= require dashboard-charts
//= require highcharts
//= require highcharts/highcharts-more
//= require bootstrap-datepicker
//= require_self
//= require_tree .

调整后的application.js #

//= require jquery
//= require jquery-ui
//= require turbolinks
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require active_admin/base
//= require filter_bar
//= require filter_box
//= require nested_form_fields
//= require bootstrap-select.min
//= require tinymce
//= require parsley
//= require raphael-2.1.0.min
//= require morris
//= require dashboard-charts
//= require highcharts
//= require highcharts/highcharts-more
//= require bootstrap-datepicker
//= require_self
//= require_tree .

核心Gem依赖 #

gem 'jquery-rails', '~> 4.5', '>= 4.5.1'
gem 'jquery-ui-rails', '~> 4.2.1'
gem 'jquery-turbolinks', '~> 2.1'
gem 'activeadmin', '~> 2.13', '>= 2.13.1'

解决方法 #

1. 禁用ActiveAdmin自动注册jQuery #

ActiveAdmin默认会自行加载jQuery，容易和项目全局的jQuery产生冲突。在config/initializers/active_admin.rb中添加配置，强制使用项目全局的jQuery：

ActiveAdmin.setup do |config|
  config.register_jquery = false
end

2. 拆分ActiveAdmin的资源加载 #

单独创建app/assets/javascripts/active_admin.js，专门管理ActiveAdmin的JS依赖，避免和全局资源混加载：

// app/assets/javascripts/active_admin.js
//= require jquery
//= require jquery-ui
//= require active_admin/base

然后在全局的application.js中移除//= require active_admin/base这一行，确保ActiveAdmin的JS只会在后台页面加载。

3. 清理资产缓存 #

修改加载顺序后，必须清理资产缓存才能让新配置生效：

rails assets:clean
# 开发环境可跳过预编译，生产环境执行：
# rails assets:precompile

4. 排查Turbolinks干扰 #

jQuery Turbolinks可能导致页面切换时jQuery绑定异常，先尝试临时移除//= require jquery.turbolinks，测试问题是否消失。如果有效，再在application.js的require_self区块添加Turbolinks加载监听：

//= require_self
document.addEventListener('turbolinks:load', function() {
  if (typeof jQuery !== 'undefined') {
    // 这里添加需要在页面加载时初始化的jQuery代码
  }
});

5. 验证版本兼容性 #

ActiveAdmin 2.13.x需要jQuery 3.x，而jquery-rails 4.5.x正好提供该版本，但如果仍有冲突，可锁定Gem版本确保兼容性：

# Gemfile中修改为固定版本
gem 'jquery-rails', '4.5.1'
gem 'jquery-ui-rails', '4.2.1'
gem 'activeadmin', '2.13.1'

执行bundle install更新依赖后重新测试。

内容的提问来源于stack exchange，提问作者Salman Bashir