Active Admin界面报错Uncaught ReferenceError: $ is not defined求助

问题背景 #

迁移Rails应用（环境：Ruby 2.5.9、Rails 5.2.8.1、ActiveAdmin 2.9.0、Webpacker 4.3.0）后，Active Admin后台多数视图出现控制台错误：

base.js:18 Uncaught ReferenceError: $ is not defined
    at base.js:18:3
    at Object.<anonymous> (base.js:14:66)
    at i (bootstrap:19:22)
    at Module.<anonymous> (active_admin.js:1:1)
    at i (bootstrap:19:22)
    at bootstrap:83:10
    at active_admin-d8e2e3d…0e9be08c9d.js:2:921

已尝试的步骤：

• 执行bundle exec rails generate active_admin:assets --use_webpacker
• 在config/initializers/active_admin.rb添加config.use_webpacker = true
• 执行rails g active_admin:webpacker

解决方案 #

问题核心是jQuery未被正确暴露到全局window对象，Active Admin的base.js依赖全局的$，而Webpacker默认不会将模块挂载到全局。以下是具体修复步骤：

1. 确保Webpacker加载jQuery插件 #

检查config/webpack/environment.js，确认已引入并启用jQuery的ProvidePlugin：

const { environment } = require('@rails/webpacker')
const jqueryPlugin = require('./plugins/jquery')
// 把jQuery插件添加到Webpack环境中
environment.plugins.prepend('Provide', jqueryPlugin)
module.exports = environment

2. 在Webpack入口中暴露jQuery到全局 #

创建/修改app/javascript/packs/active_admin.js（启用Webpacker后，Active Admin会优先加载这个文件）：

// 导入jQuery并挂载到window
import $ from 'jquery'
window.$ = $
window.jQuery = $

// 导入Active Admin的核心JS
import 'activeadmin'

注意：如果之前使用Sprockets的app/assets/javascripts/active_admin.js，建议注释掉其中的内容，避免冲突。

3. 验证Active Admin配置 #

确保config/initializers/active_admin.rb中的Webpacker配置正确：

# 启用Webpacker处理Active Admin资产
config.use_webpacker = true

# 可选：禁用Sprockets加载Active Admin的JS/CSS，避免重复
# config.js_builder = false
# config.css_builder = false

4. 清理并重新编译资产 #

执行命令清理旧缓存并重新打包：

# 清理所有编译过的资产
rails assets:clobber
# 编译Webpacker资产
rails webpacker:compile
# 生产环境需要执行资产预编译
rails assets:precompile

5. 处理Turbolinks冲突（可选） #

如果应用使用Turbolinks，需确保Active Admin的JS在页面加载完成后初始化：

import $ from 'jquery'
import Turbolinks from 'turbolinks'

window.$ = $
window.jQuery = $

Turbolinks.start()

// 在Turbolinks页面加载完成后导入Active Admin
document.addEventListener('turbolinks:load', () => {
  import 'activeadmin'
})

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