Rails 7中app/assets/javascripts下自定义JS文件破坏Stimulus资源管道

核心问题 #

你遇到的情况是Rails 7默认JS加载机制（如Import Maps）与新增的asset pipeline JS入口文件冲突，导致Stimulus控制器未被正确注册加载：

1. Rails 7默认以app/javascript/application.js作为JS入口（配合Import Maps或JS Bundling），Stimulus控制器的注册逻辑就包含在这个文件里。
2. 当你在app/assets/javascripts下创建application.js时，Rails会优先将其作为asset pipeline的JS主入口，直接覆盖了默认加载流程。
3. 你在manifest.js中添加的//= link_tree ../../javascript .js虽能暴露app/javascript下的文件，但Stimulus控制器需要通过入口文件导入并注册才能生效——而你新增的app/assets/javascripts/application.js并没有这段注册逻辑，所以控制器即便被请求也无法正常工作。

解决步骤 #

方案1：遵循Rails 7默认JS规范（推荐）

• 删除app/assets/javascripts/application.js，保留默认的app/javascript/application.js作为JS入口。
• 将自定义JS代码放在app/javascript目录下（比如新建app/javascript/custom.js），然后在app/javascript/application.js中导入：

  import "./custom"
  

• 恢复manifest.js到默认配置（无需添加//= link_tree ../../javascript .js）：

  //= link_tree ../images
  //= link_directory ../stylesheets .css
  

方案2：坚持用Asset Pipeline加载JS

若一定要用asset pipeline管理JS：

1. 保留app/assets/javascripts/application.js，并在其中添加Stimulus注册逻辑（需确保Stimulus已通过asset pipeline安装）：

   // 导入Stimulus及控制器
   import "@hotwired/stimulus"
   import "@hotwired/stimulus-loading"
   // 导入自定义代码
   import "./custom"
   

2. 修改manifest.js，避免与app/javascript目录冲突：

   //= link_tree ../images
   //= link_directory ../stylesheets .css
   //= link_tree ../javascripts .js
   //= link_tree ../../../vendor/javascript .js
   

3. 禁用Import Maps：执行bin/rails importmap:remove，并在Gemfile中移除importmap-rails。

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