Rails应用自定义JavaScript失效及Import Map相关报错求助

核心问题：混用Importmap与Sprockets（Asset Pipeline）JS加载机制 #

你同时使用了Rails 7默认的Importmap模块加载，以及传统的Sprockets资产管道加载，两种机制冲突导致报错，同时自定义JS无法生效。

报错原因拆解 #

1. An import map is added after module script load was triggered：
   你在带type="module"的javascript_include_tag之后加载了javascript_importmap_tags，模块脚本加载触发后才引入importmap，违反了模块加载的时序要求。即使调整顺序，两种加载机制的冲突仍会导致问题。
2. 无法解析模块标识符"application"/"@hotwired/turbo-rails"：
   javascript_include_tag引入的是Sprockets打包的JS文件，却被标记为type="module"，但该文件并未基于Importmap的模块系统构建，导致无法识别Importmap中定义的模块别名。

解决方案（二选一） #

方案一：统一使用Importmap（Rails 7推荐） #

1. 修复布局文件加载逻辑

修改application.html.erb，移除Sprockets的JS引入，保留Importmap标签即可：

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_importmap_tags %>

javascript_importmap_tags会自动加载你在importmap.rb中pin的application模块（对应app/javascript/application.js）。

2. 迁移jQuery与Bootstrap到Importmap

在config/importmap.rb中添加依赖的pin配置：

# Pin npm packages by running ./bin/importmap
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

# 添加jQuery和Bootstrap的pin
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js"
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.3.2/dist/js/bootstrap.esm.js"

然后在app/javascript/application.js中引入：

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "jquery"
import "bootstrap"
import "controllers"

3. 让自定义JS生效

将app/assets/javascripts/下的自定义JS文件迁移到app/javascript/目录（比如新建app/javascript/custom文件夹存放），然后在application.js中直接引入：

// 引入自定义JS示例
import "./custom/your_script"

方案二：回退到Sprockets（适合依赖旧版库场景） #

1. 移除Importmap相关配置

• 删除config/importmap.rb文件
• 移除application.html.erb中的<%= javascript_importmap_tags %>

2. 调整Sprockets的JS入口文件

修改app/assets/javascripts/application.js，添加Turbo和Stimulus的依赖：

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbo-rails
//= require stimulus
//= require stimulus-loading
//= require_tree ./controllers
//= require_tree .

3. 修复布局文件的JS引入

修改application.html.erb的JS标签，移除type="module"：

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

4. 确保自定义JS生效

app/assets/javascripts/下的自定义JS会被//= require_tree .自动加载，注意：以下划线_开头的文件不会被自动加载，需要手动添加//= require _your_script。

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