Rails中jquery_mask_rails与jquery-inputmask-rails gem JS加载异常问题

我之前也踩过类似的坑，给你一步步拆解解决这两个头疼的问题：

问题1：仅添加require未引入gem导致的Asset错误 #

报错信息：ActionView::Template::Error (couldn't find file 'jquery.inputmask.bundle' with type 'application/javascript')

这是因为Rails的asset pipeline只能识别已安装gem里的资源文件——你只在application.js里加了require声明，但没把gem加入项目依赖，系统自然找不到对应的文件。

解决步骤：

• 在Gemfile中添加gem依赖：

  gem 'jquery-inputmask-rails'
  

• 执行bundle安装命令，把gem拉到本地：

  bundle install
  

问题2：配置齐全但inputmask方法未定义的JS错误 #

报错信息：$(...).inputmask is not a function

这种情况大多是资源加载顺序不对、asset pipeline未识别新资源，或者初始化时机有问题，按以下步骤排查：

1. 确保jQuery优先加载 #

jquery.inputmask.bundle完全依赖jQuery，所以application.js里的加载顺序必须是jQuery在前，inputmask在后：

//= require jquery3  // 替换成你项目实际使用的jQuery版本，比如jquery2
//= require jquery.inputmask.bundle
//= require_tree .

2. 重启Rails服务器 #

添加新gem后，asset pipeline需要重新识别资源文件，重启开发服务器是最稳妥的操作：

rails s

3. 确认布局文件正确引入application.js #

检查你的app/views/layouts/application.html.erb（或对应布局文件）中是否包含JS入口文件的引用：

<%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>

如果是Rails 7之前的版本，可能是：

<%= javascript_include_tag 'application' %>

4. 验证资源是否加载成功 #

打开浏览器开发者工具的网络标签，刷新页面，查看是否有jquery.inputmask.bundle.js的请求，且返回状态为200。如果没找到，可尝试手动预编译资源（开发环境一般不需要，但能强制asset pipeline识别文件）：

rails assets:precompile

5. 适配Turbo的初始化时机 #

如果你的项目用了Turbo（Rails 7默认配置），$(document).ready()可能不会触发，建议换成Turbo的加载事件：

document.addEventListener('turbo:load', function() {
  $('.iban-field').inputmask('AA99 **** **** **** **** **** **** **** **');
});

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