Rails 7中Stimulus引入Bootstrap失败：模块解析错误

你的核心问题是模块解析器找不到bootstrap模块，导致Stimulus控制器注册失败。以下是针对Rails 7两种主流JS加载方式的解决方案：

一、使用Importmap（Rails 7默认方式） #

1. Pin Bootstrap 模块
   在终端运行命令，让Importmap映射Bootstrap的ES模块版本：

   bin/importmap pin bootstrap
   

   这会在config/importmap.rb中添加类似以下的配置：

   pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.x.x/dist/js/bootstrap.esm.js"
   

2. 验证Stimulus控制器导入语句
   保持你的modal_controller.js中的导入语句不变：

   import { Controller } from "@hotwired/stimulus"
   import * as bootstrap from "bootstrap"
   
   // 控制器其余代码...
   

3. 确保Application.js配置正确
   检查app/javascript/application.js是否包含Stimulus和控制器的导入：

   import "@hotwired/turbo-rails"
   import "controllers"
   // 可选：如果需要全局使用Bootstrap JS，可添加下面一行
   // import "bootstrap"
   

二、使用npm/Yarn（搭配jsbundling-rails） #

如果你通过npm安装了Bootstrap，需确保依赖和导入路径正确：

1. 安装依赖
   确保安装Bootstrap及它的依赖Popper.js：

   npm install bootstrap @popperjs/core
   

2. 修正Stimulus控制器的导入路径
   若直接导入bootstrap报错，可指定ES模块的具体路径：

   import { Controller } from "@hotwired/stimulus"
   import * as bootstrap from 'bootstrap/dist/js/bootstrap.esm.js'
   
   // 控制器其余代码...
   

3. 构建JS资源
   运行构建命令确保资源被正确打包：

   npm run build
   

额外排查要点 #

• 避免同时使用bootstrap gem和npm安装的Bootstrap，二者选其一，防止冲突。
• 清除浏览器缓存（Ctrl+Shift+R），避免旧的模块缓存导致解析错误。
• 检查Stimulus控制器文件名是否为modal_controller.js，且放在app/javascript/controllers/目录下。

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