Rails 7使用Importmap引入jQuery后$未定义问题求助

问题核心是视图内联脚本执行时机早于jQuery加载完成——Importmap采用异步加载JS资源，而页面内的<script>会在DOM解析到它时立即执行，此时jQuery还未挂载到window上，所以报错。

以下是几种可行的解决办法：

1. 将内联逻辑迁移到模块化脚本文件 #

这是最符合Rails + Importmap架构的做法：

• 在app/javascript目录下创建新文件，比如app/javascript/utils/email_sync.js：

  import jquery from "jquery"
  
  $(document).ready(function() {
    $("#user_primary_email").focusout(function(){
      $("#user_email").val($(this).val());
    });
  });
  

• 在application.js中导入这个文件：

  import "./utils/email_sync"
  

2. 调整内联脚本的执行时机 #

如果必须保留内联脚本，通过监听Turbo或DOM加载事件，确保jQuery已加载后再执行逻辑：

<script>
  // 监听Turbo页面加载完成事件（适配Rails 7+的Turbo环境）
  document.addEventListener('turbo:load', function() {
    $("#user_primary_email").focusout(function(){
      $("#user_email").val($(this).val());
    });
  });
</script>

或者兼容普通DOM加载场景：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 确保jQuery已挂载到window
    if (window.$) {
      $("#user_primary_email").focusout(function(){
        $("#user_email").val($(this).val());
      });
    }
  });
</script>

3. 确认布局中的JS标签顺序 #

检查app/views/layouts/application.html.erb，确保javascript_importmap_tags在内联脚本之前加载，这样能最大化保证jQuery先完成挂载：

<body>
  <!-- 页面内容 -->

  <%= javascript_importmap_tags %>
  <!-- 内联脚本放在importmap标签之后 -->
  <script>
    // 你的脚本逻辑
  </script>
</body>

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