Rails 6.1.3项目jquery_ujs加载位置排查及冲突报错处理

排查原因 #

• 第三方脚本间接引入：你引入的Bootstrap或其他外部脚本可能打包了jquery_ujs，属于依赖链隐性加载，而非手动引入。
• npm依赖树暗藏：部分npm包会依赖jquery-ujs（注意包名是短横线格式），可以通过命令查看依赖链：

  # yarn用户
  yarn list jquery-ujs
  # npm用户
  npm ls jquery-ujs
  

• Turbolinks缓存残留：Turbolinks的页面缓存可能导致旧脚本残留，或页面切换时脚本重复加载。
• Asset Pipeline遗留：若项目曾用Asset Pipeline，public/assets目录或旧的sprockets配置可能残留编译好的含jquery_ujs的文件。
• 浏览器扩展干扰：部分浏览器扩展会注入jquery相关脚本，引发冲突，可通过隐身模式验证。

解决方法 #

• 剔除间接依赖的jquery-ujs：在package.json中强制剔除该依赖，yarn用户添加resolutions，npm用户添加overrides：

  // yarn配置
  "resolutions": {
    "jquery-ujs": "0.0.0"
  }
  // npm配置
  "overrides": {
    "jquery-ujs": "0.0.0"
  }
  

  执行yarn install或npm install重新安装依赖。
• 清理编译与浏览器缓存：

  rails webpacker:clean
  rails webpacker:compile
  

  同时强制刷新浏览器（Ctrl+F5）清除客户端缓存。
• 确保单一UJS加载：确认application.js仅保留import Rails from "@rails/ujs"; Rails.start();，无任何jquery_ujs相关引入；检查_head.html.erb中的外部脚本，排除含jquery_ujs的文件。
• 修复Turbolinks加载问题：给脚本添加data-turbolinks-track="reload"属性，或临时禁用Turbolinks验证是否为缓存导致的重复加载。

对用户体验的影响 #

该冲突会导致UJS功能异常，比如表单ajax提交、按钮交互失效，或触发重复请求，虽部分场景用户无直观感知，但存在潜在交互故障，建议及时修复。

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