Rails 6.1 资产管道环境下Stimulus配合importmap不加载问题求助

问题修复 #

1. 修正Stimulus控制器路径 #

当前你的控制器存放路径为app/javascript/controller/hello_controller.js，目录名是单数controller，但config/importmap.rb中pin_all_from "app/javascript/controllers", under: "controllers"配置指向的是复数controllers目录，Stimulus无法扫描到控制器文件。
直接将app/javascript/controller目录重命名为app/javascript/controllers即可。

2. 修正Gemfile语法错误 #

你的Gemfile中gem 'importmap-rails',末尾多了多余的逗号，会导致依赖安装异常，删除该逗号后重新执行bundle install。

3. 清理布局重复JS加载逻辑 #

你当前布局中同时混用了Asset Pipeline和Importmap两种JS加载方式，多份Turbo实例加载会导致冲突：

• javascript_importmap_tags已经会自动加载Importmap配置中的application.js，而application.js中已经引入了Turbo和Stimulus的相关代码，无需单独加载Turbo相关标签
• 调整application_html.erb head中的JS部分，删除冗余代码，仅保留必要内容：

<%= stylesheet_link_tag 'application_html' %>
<%= javascript_importmap_tags %>

你之前删除旧Turbo加载标签后Turbo失效，本质是Importmap的JS未被正确加载，完成后续配置后即可恢复正常。

4. 配置Asset Pipeline兼容 #

由于你仍在使用Asset Pipeline，需要将Importmap对应的JS目录加入预编译路径，在config/initializers/assets.rb中添加如下配置：

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

添加后重启Rails服务。

Importmap加载异常排查步骤 #

如果完成上述修改后Stimulus仍未生效，按以下步骤排查：

• 打开浏览器开发者工具，查看Console标签是否有报错：
  • 出现application.js 404：说明Asset Pipeline未正确预编译app/javascript下的文件，检查上述assets.rb配置是否正确
  • 出现Failed to resolve module specifier "@hotwired/stimulus"：说明Importmap配置未生效，查看页面head中是否正确生成了<script type="importmap">标签，标签内是否包含@hotwired/stimulus的映射
  • 出现Failed to resolve module specifier "controllers/hello_controller.js"：说明控制器路径仍不匹配，检查目录名拼写
• 在Console中输入window.Stimulus，如果输出为undefined，说明Stimulus未完成加载，检查app/javascript/application.js是否有import "controllers"语句，app/javascript/controllers/index.js是否存在（stimulus:install会自动生成该文件用于自动注册控制器）
• 如果window.Stimulus有值，输入Stimulus.controllers，如果输出为空数组，说明控制器未被自动注册，确认控制器文件名符合[controller名称]_controller.js的命名规范

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