Rails7中使用Importmap加载JS文件异常问题求助

核心原因 #

这个问题和Turbo Drive的页面加载机制直接相关：

1. 首次通过Turbo导航进入页面时，Turbo不会重新加载整个JS运行环境，只是置换页面的部分DOM内容，导致ES模块中导入的jQuery没有被挂载到全局window对象，$变量无法访问。
2. 依赖DOM就绪的代码（比如图表初始化、SB Admin的组件逻辑）没有监听Turbo的生命周期事件，首次Turbo导航时原生的DOMContentLoaded不会触发，导致代码未执行。

分步解决方案 #

1. 手动挂载jQuery到全局对象

ES模块中导入的jQuery默认作用域是模块内部，不会自动挂载到window。修改app/javascript/application.js的jQuery导入部分：

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

// 导入jQuery并挂载到全局
import jquery from "jquery"
window.$ = window.jQuery = jquery
import "jquery-easing"

// 其他导入保持不变
import "sb-admin-2.min"
import "demo/chart-area-demo"
import "charts/Chart.bundle.min"
import "charts/Chart.min"

2. 监听Turbo的turbo:load事件执行DOM相关代码

所有依赖DOM的初始化逻辑必须放到turbo:load事件监听中，这个事件会在全页面加载和Turbo导航完成时触发，覆盖首次进入和刷新场景。

修改application.js，添加事件监听：

// 上面的导入代码之后

document.addEventListener('turbo:load', function() {
  // 现在首次进入也能正常输出$
  console.log($);

  // 初始化图表（示例，根据你的实际DOM调整）
  const chartElement = document.getElementById('chart-area');
  if (chartElement) {
    // 这里放入图表的初始化逻辑，比如：
    new Chart(chartElement, {
      type: 'line',
      data: { /* 你的数据 */ },
      options: { /* 你的配置 */ }
    });
  }

  // SB Admin 2的组件初始化（如果需要）
  // 比如侧边栏折叠、工具提示等逻辑，都放到这里
});

3. 验证Importmap配置正确性

确认importmap.rb中的pin规则和文件路径匹配：

• pin "sb-admin-2.min"对应app/javascript/sb-admin-2.min.js，如果文件在子目录（比如app/javascript/vendor/sb-admin-2.min.js），需要调整pin路径：pin "sb-admin-2.min", to: "vendor/sb-admin-2.min.js"
• 图表文件charts/Chart.min对应vendor/javascript/charts/Chart.min.js，确保文件存在且路径正确。

额外提示 #

如果问题仍然存在，可以尝试：

• 禁用特定页面的Turbo导航：在链接中添加data-turbo="false"属性
• 清除Turbo缓存：通过Turbo.clearCache()在代码中手动清理，或者清空浏览器缓存

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