Rails纯API项目为Active Admin配置ActionCable的问题

问题背景 #

你的Rails 6.0.6.1 API项目（初始无JS支持，后添加Active Admin）在使用importmap-rails引入ActionCable时，出现错误：

load_messages:1 Uncaught TypeError: Failed to resolve module specifier "@rails/actioncable". Relative references must start with either "/", "./", or "../".

解决方案 #

1. 正确配置importmap映射@rails/actioncable #

API模式下的Rails默认不会自动pin ActionCable的前端模块，需要手动执行：

bin/importmap pin @rails/actioncable

执行后检查config/importmap.rb，确保存在以下行：

pin "@rails/actioncable", to: "actioncable.esm.js"

如果没有，手动添加该行后重启服务器。

2. 修正Admin页面的JS引入标签 #

Active Admin的布局中不要使用javascript_include_tag，改用importmap专用的标签加载模块系统。修改app/views/layouts/active_admin.html.erb：

<!-- 替换原来的javascript_include_tag -->
<%= javascript_importmap_tags %>

该标签会自动生成带有type="module"属性的script标签，符合ES模块加载要求。

3. 确保ActionCable在API模式下正确挂载 #

API模式下Rails不会自动挂载ActionCable，需在config/routes.rb中添加挂载配置：

mount ActionCable.server => '/cable'

同时在config/application.rb中确认ActionCable的配置（无则添加）：

config.action_cable.mount_path = '/cable'
config.action_cable.disable_request_forgery_protection = true # 开发环境可临时开启，生产环境按需配置

4. 调整consumer.js的引入代码 #

确保app/assets/javascripts/consumer.js中的引入代码正确：

import { createConsumer } from "@rails/actioncable"

export default createConsumer()

5. 清除资产缓存 #

执行以下命令清除可能存在的资产缓存问题：

rails assets:clobber
rails assets:precompile # 开发环境可选，生产环境建议执行

完成以上步骤后重启Rails服务器，Admin端的ActionCable模块即可正常加载。

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