Rails 6升级至Rails 7后jquery-ujs与ActionCable失效求助

完全可以继续在 Rails 7 中使用 Sprockets 资产管道和 jquery-ujs，以下是针对 JavaScript 和 ActionCable 失效问题的具体修复步骤：

1. 调整 Gem 依赖 #

在 Gemfile 中添加或确认以下内容：

# 保留 Sprockets 支持
gem 'sprockets-rails'
# 添加 jQuery 及 jquery-ujs 依赖（Rails 7 默认移除了该 gem）
gem 'jquery-rails'

执行 bundle install 安装依赖。

2. 修复 application.js 的加载冲突 #

你的代码中混合使用了 Sprockets 的 //= require 指令和 ES 模块的 import，这会导致加载异常，需要调整：

• 移除 import "stylesheets/application";：样式文件应放在 app/assets/stylesheets/application.css（或 .scss）中，通过 Sprockets 指令加载，而非在 JS 文件中导入。
• 调整 ActionCable 的加载路径：将 //= require cable 改为 //= require action_cable，确保加载 Rails 7 内置的 ActionCable 核心代码。

修改后的 application.js 示例：

//= require jquery
//= require jquery_ujs
//= require activestorage
//= require cloudinary/jquery.cloudinary
//= require action_cable
//= require local-time
//= require serviceworker-companion
//= require cookies_eu
//= require gmaps/google
//= require_tree .

// 你的 JavaScript 函数写在这里

注意：//= require_tree . 放在最后，确保所有自定义 JS 文件都能被加载。

3. 配置资产清单文件 #

确保 config/assets/manifest.js 包含必要的资源声明：

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
//= link cable.js

这会让 Sprockets 正确编译并生成所需的资产文件。

4. 修复 ActionCable 连接 #

检查 app/assets/javascripts/cable.js 文件，确保其内容符合 Rails 7 的标准初始化逻辑：

//= require action_cable
//= require_self
//= require_tree ./channels

(function() {
  this.App || (this.App = {});

  App.cable = ActionCable.createConsumer();

}).call(this);

如果该文件不存在，直接创建即可。

5. 处理 Turbo 兼容性（可选） #

Rails 7 默认启用 Turbo，可能会与 jquery-ujs 产生冲突：

• 若想保留 Turbo：确保 jquery-ujs 版本更新到最新，或在存在冲突的页面通过 data-turbo="false" 属性禁用 Turbo。
• 若无需 Turbo：在 Gemfile 中移除 gem 'turbo-rails'，执行 bundle remove turbo-rails，并删除项目中相关的 Turbo 配置文件（如 app/javascript/controllers 目录）。

6. 测试验证 #

• 执行 rails assets:precompile 本地编译资产，检查是否有报错。
• 启动 Rails 服务器，打开浏览器控制台，确认无 JS 加载错误。
• 测试 ActionCable 功能（如实时消息、通知），验证连接是否正常。

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