Rails 7中Stimulus Rails Nested Form导入报错求助

问题原因 #

你遇到的错误源于stimulus-rails-nested-form v4.x版本采用了ES模块语法，但你的Webpacker 5（基于Webpack 4）环境对.mjs文件的处理逻辑与该组件的导出方式不兼容，导致无法正确解析Stimulus的命名导出。

解决方案 #

方案1：降级组件版本以兼容Webpack 4 #

Webpacker 5（搭配Webpack 4）与stimulus-rails-nested-form v4.x存在兼容性冲突，降级到v3.x版本可直接解决问题：

1. 卸载当前版本：

yarn remove stimulus-rails-nested-form

2. 安装兼容的v3.x版本：

yarn add stimulus-rails-nested-form@3.1.0

3. 恢复application.js中的组件注册语句：

import { Application } from "@hotwired/stimulus"
import NestedForm from 'stimulus-rails-nested-form'

const application = Application.start()
application.register('nested-form', NestedForm) // 取消注释
application.debug = false
window.Stimulus   = application

export { application }

方案2：调整Webpack配置兼容ES模块 #

若想保留v4.x版本，需修改Webpack配置以正确处理.mjs文件：

1. 在config/webpack/environment.js中添加配置：

const { environment } = require('@rails/webpacker')

// 将stimulus-rails-nested-form排除在默认JS loader的忽略列表外，强制处理其.mjs文件
environment.loaders.get('javascript').exclude = /node_modules\/(?!stimulus-rails-nested-form)/
// 配置Webpack正确识别.mjs文件类型
environment.config.module.rules.push({
  test: /\.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto'
})

module.exports = environment

2. 重启Webpack开发服务器，恢复组件注册：

import { Application } from "@hotwired/stimulus"
import NestedForm from 'stimulus-rails-nested-form'

const application = Application.start()
application.register('nested-form', NestedForm)
application.debug = false
window.Stimulus   = application

export { application }

验证 #

执行yarn install后重启服务器，检查错误是否消失，测试嵌套表单的添加/删除功能是否正常运行。

内容的提问来源于stack exchange，提问作者opensource-developer