Rails 7.2使用importmap-rails导入JS遇生产环境MIME类型错误

问题原因 #

本地环境正常是因为Rails开发服务器直接处理文件请求，相对路径能定位到对应JS文件；但生产环境中，资产经过预编译后存储在public/assets目录，importmap-rails需要通过pin映射来关联模块名和编译后的资源路径，直接用相对路径导入时，浏览器请求的路径无法匹配到预编译后的JS资源，最终返回404的HTML页面，触发MIME类型不允许的错误。

解决方案 #

方案1：改用importmap别名导入（推荐）

1. 确认config/importmap.rb中已通过pin_all_from覆盖所有控制器子目录（你已配置，可跳过这步）：

   pin_all_from "app/javascript/controllers", under: "controllers"
   

   这个命令会自动pinapp/javascript/controllers下所有子目录的文件，包括shared/scroll.js，生成的别名为controllers/shared/scroll。

2. 在app/javascript/controllers/user/work.js中，替换相对路径导入为别名导入：

   import { handleScroll } from "controllers/shared/scroll"
   

方案2：显式pin目标模块

如果自动pin没生效，可在config/importmap.rb中手动添加pin规则：

pin "controllers/shared/scroll", to: "controllers/shared/scroll.js"

之后同样用别名导入即可。

方案3：确保资产被预编译

如果预编译时遗漏了该文件，在config/initializers/assets.rb中添加：

Rails.application.config.assets.precompile += %w( controllers/shared/scroll.js )

然后重新执行生产环境预编译：

rails assets:precompile RAILS_ENV=production

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