Rails 7使用Importmap时$未定义报错的解决方法

你碰到的Uncaught ReferenceError: $ is not defined报错来自两个配置疏漏：

• Importmap 遵循ES模块规范，导入的jQuery默认只在模块内部作用域生效，不会自动挂载到全局window对象，所以你写在页面里的内联<script>标签根本读不到$变量
• tempusdominus-bootstrap-4 本身依赖全局存在的jQuery对象才能注册datetimepicker插件，哪怕你在application.js里导入了jQuery，没挂到全局的话插件也无法正常绑定到jQuery方法链上。

1. 调整application.js配置，手动暴露jQuery到全局 #

打开app/javascript/application.js，把原有内容替换为以下代码：

import "@hotwired/turbo-rails"
import "controllers"
import jQuery from "jquery"
// 手动将jQuery挂载到全局，供内联脚本和第三方插件调用
window.$ = window.jQuery = jQuery
import "tempusdominus-bootstrap-4"

注意：jQuery的导入、全局挂载逻辑必须写在tempusdominus-bootstrap-4的导入语句之前，否则插件初始化时会因为找不到jQuery直接报错

2. 适配Turbo的页面加载时机，修改初始化脚本 #

因为项目用了Turbo做无刷新跳转，原生的jQuery ready事件只会在首次全量加载页面时触发，后续Turbo跳转不会触发该事件。把你原来的datetimepicker初始化脚本改成以下写法即可：

<script>
document.addEventListener('turbo:load', () => {
  $('#datetimepicker1').datetimepicker({locale: 'ru'})
})
</script>

不要把初始化逻辑直接写在jQuery的$(function() {})回调里，否则Turbo跳转后组件会失效，只有手动刷新页面才会正常。

3. 补全缺失的依赖（可选但建议配置） #

tempusdominus-bootstrap-4 本身依赖moment.js做日期处理，你配置了俄语locale，还需要引入moment对应的俄语语言包，不然locale配置不会生效。在config/importmap.rb里追加moment相关的依赖映射，再在application.js里挂载完jQuery之后导入moment和对应语言包即可。

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