Rails集成React遭遇Sprockets::DoubleLinkError错误求助

环境版本 #

• Rails: 7.0.3.1
• Ruby: 3.1.0p0
• React: 18.2.0

问题描述 #

现有Rails项目通过jsbundling-rails+esbuild集成React，执行安装命令后，本地运行及部署Heroku时触发Sprockets::DoubleLinkError，提示：

Sprockets::DoubleLinkError: Multiple files with the same output path cannot be linked ("application.js")
In "/tmp/build_54e3859f/app/assets/config/manifest.js" these files were linked:
  - /tmp/build_54e3859f/app/javascript/application.js
  - /tmp/build_54e3859f/app/assets/builds/application.js

已尝试的无效操作：

• 重命名app/javascript/application.js为application2.js：本地可行但Heroku部署失败
• 删除app/assets/builds/下的application.js和.map文件：问题重复出现
• 参考CSS相关的DoubleLinkError方案：未解决

当前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 "controllers"
import "./react/src/index.js"

解决方案 #

1. 修正manifest.js的资产引用 #

打开app/assets/config/manifest.js，移除对app/javascript/application.js的直接引用，确保只指向打包后的builds目录。正确的manifest内容应为：

//= link_tree ../images
//= link_tree ../builds

原因：jsbundling-rails会将app/javascript/application.js打包到app/assets/builds/application.js，如果manifest同时引用原文件和打包后的文件，会触发Sprockets的重复链接错误。

2. 确认esbuild打包配置正确 #

检查package.json中的build命令，确保仅以app/javascript/application.js为入口打包：

"scripts": {
  "build": "esbuild app/javascript/application.js --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
}

避免多入口打包导致重复生成application.js。

3. 清理资产缓存并重新编译 #

1. 本地执行命令清除旧资产：

   rails assets:clobber
   

2. 删除app/assets/builds下除.keep外的所有文件
3. 重新执行打包命令：

   npm run build # 或 yarn build，根据你的包管理器选择
   

4. 预编译资产（开发/生产环境均适用）：

   rails assets:precompile
   

4. Heroku部署配置调整 #

1. 确保Heroku添加了nodejs和ruby两个buildpack，且nodejs排在前面（先编译JS再处理Rails）：

   heroku buildpacks:add --index 1 heroku/nodejs
   heroku buildpacks:add --index 2 heroku/ruby
   

2. 将app/assets/builds/*加入.gitignore，避免提交编译后的文件，让Heroku在构建时自动执行打包。

关于Turbo和Controllers的导入 #

如果需要启用Turbo和Stimulus，可恢复application.js中的导入：

import "@hotwired/turbo-rails"
import "controllers"
import "./react/src/index.js"

若导入后出错，需确认app/javascript/controllers目录存在（可通过rails generate stimulus:install生成）。

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