在使用Sprockets的Rails 6.1应用中接入Hotwire时模块解析报错如何解决

共存性说明 #

importmap-rails、Stimulus 与 Sprockets 完全可以共存，无需修改原有 Sprockets 资产配置，二者负责管理不同的前端资源逻辑，互不冲突。

报错原因 #

你使用的 importmap-rails 0.7.6 属于早期非正式版本，默认未正确配置 application 裸模块的导入映射规则，导致浏览器无法识别不带路径前缀的 application 模块标识。

解决方案 #

按照优先级尝试以下操作即可修复：

方案1：快速升级适配（推荐） #

低版本的 importmap-rails 和 stimulus-rails 存在较多兼容问题，优先升级到兼容 Rails 6.1 的正式版本：

• 执行升级命令：

bundle update importmap-rails stimulus-rails

• 重新生成默认配置，覆盖旧文件：

rails importmap:install
rails stimulus:install

• 重启 Rails 服务后验证即可。

方案2：手动修复配置 #

如果不想升级版本，手动核对以下配置：

• 检查 config/importmap.rb 存在以下规则：

pin "application", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

• 检查 config/initializers/assets.rb 已添加 javascript 目录到资产路径：

Rails.application.config.assets.paths << Rails.root.join("app/javascript")

• 检查布局文件中 javascript_importmap_tags 的引入顺序在所有其他自定义 JS 引入之前，且没有重复用 javascript_include_tag 引入 application.js 文件。

共存注意事项 #

• 原有 Sprockets 管理的资产继续使用 javascript_include_tag、stylesheet_link_tag 引入即可，无需修改
• 不要在 Sprockets 的 manifest 文件（app/assets/config/manifest.js）中声明 app/javascript 下的资源，避免重复编译冲突
• Stimulus 控制器统一放在 app/javascript/controllers 目录下，由 importmap 自动加载

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