无法在Rails应用中导入Stimulus组件：模块解析失败

错误原因 #

Rails 7.0.4默认使用Importmap作为JavaScript依赖管理工具，它不会自动识别node_modules目录下的npm包，直接导入未映射的包会触发模块解析失败错误。

解决方案（适配默认Importmap） #

1. 先移除已安装的npm包：

npm uninstall stimulus-rails-nested-form

2. 使用Importmap添加并映射该包：

bin/importmap pin stimulus-rails-nested-form

3. 保持你原有的app/javascript/controllers/application.js代码不变，此时模块解析会正常工作。

备选方案（若使用esbuild/Webpack打包） #

如果项目使用esbuild或Webpack作为打包工具，可尝试指定包的具体入口文件路径导入：

import { Application } from "@hotwired/stimulus"
// 替换原导入语句为指定入口文件
import NestedForm from 'stimulus-rails-nested-form/dist/stimulus-rails-nested-form.js'

const application = Application.start()
application.register('nested-form', NestedForm)

application.debug = false
window.Stimulus   = application

export { application }

验证步骤 #

确保HTML中正确调用控制器，示例：

<div data-controller="nested-form">
  <!-- 嵌套表单内容 -->
</div>

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